介绍

这将是一个简短的教程。我发现应用程序中的错误是寻找解决方案的最佳动力。最近，我遇到了一个很小的问题，首先似乎无法解决。当解决方案可用时，它似乎是如此简单，以至一开始它甚至都不是问题。无论如何，我认为这个问题及其解决方案值得记录。就我而言，我无法在线找到任何解决方案。对于其他所有人来说，这太简单或太不重要了。如果其他人遇到相同的问题，此解决方案也可以提供帮助。

那是什么问题呢？试想一下，你有一个span元素列表，它们被Bootstrap的标签类修饰（label和label-info或label-success，label-warning等等）。当它们显示在屏幕上时，它们以一行显示。当页面调整大小时，它们仍显示为一行，并且无法正确地自动对齐为多行。这是此问题的屏幕截图：

为什么会发生此问题？我承认我有点天真。我直接在span元素上使用ngRepeat（AngularJS的）。这就是我所做的。我坦率地承认我做这件事的时候并不了解。我应该更了解：

<div class="row"><div class="col-xs-12"><span class="label label-info" ng-repeat="item in vm.keywords">{{item}}</span></div>
</div>

如您所见，HTML标记看起来很合理。我没有意识到的是，通过这种设计，该span元素将一个接一个地放置，并且它们之间没有任何间隔。并且span是内联元素，此类元素排列会导致问题，如上面的屏幕截图所示。

在Box里寻找解决方案

我尝试的第一个解决方案是当ngRepeat指令是元素的一部分时如何为span元素添加额外的空间。对于Google来说，这是一个非常棘手的问题。很难找到一个直接的答案。

事实证明，有一种解决方案能赢得大奖。这是正确的解决方案。然而，它是如此的虚幻，该解决方案隐藏在Google搜索结果的第五页中。不幸的是，我找不到该页面了。否则，我会适当地感谢那个家伙。无论如何，我没有想到这个答案。这很棘手，而且我对HTML5的了解还不足以提出这样的东西。解决方案是在元素末尾添加一个空格字符。当ngRepeat在循环中复制元素时，它将确保正确管理元素之间的间距。这是通过CSS完成的。

使用CSS和HTML5，您可以指定要在HTML元素之后添加的内容。因此，这是在我发现的解决方案中定义CSS类的方式：

.space::after {content: " ";
}

CSS定义非常简单，对于任何带有CSS类“space”的元素，最后都添加一个空格字符。CSS中的content关键字表示要添加的样式是文本内容。因此，用单引号或双引号引起来的任何内容都是要添加到元素末尾的文本内容。

以下是此新CSS类在解决方案中使用ngRepeat的方式：

<div class="row"><div class="col-xs-12"><span class="space" ng-repeat="item in vm.keywords"><span class="label label-info">{{item}}</span></span></div>
</div>

这是所有span元素都正确对齐并分成几行的屏幕截图：

这里的想法是将span元素包装在另一个span元素内。额外的内容空间将添加到外部span元素的末尾。当将span元素（外部元素）添加到页面的DOM树中时，这可以确保span元素（外部元素）的适当间距。

这是解决方案＃1，它教会了我两件事：

使用CSS和HTML 5，可以轻松地向HTML页面添加额外的内容。
可以将一个span元素包装在另一个span元素内。

第二点是我应该意识到的，但是直到将其作为解决方案提供给我时才看到。第一点是我真的不知道的事情。如果我忽略了这个问题，或者只是提出了一个虚拟的解决方案而忘了它，那我将一无所知。因此，每一个试图修复的错误都将教给我们一些我们不知道的东西。

现在，我知道可以将一个span元素包装在另一个span元素中，是否还有另一种方法可以解决此问题？事实证明，我不必使用本节中描述的复杂解决方案，而是使用新的CSS类以某种方式添加额外的空间。

开箱即用的解决方案

我想提出的解决方案是在每个span元素后添加某种空格，以免它们彼此“粘”在一起。内置解决方案是我为每个span元素添加一个空格。

有了解决方案，我就能完成它。但是，解决方案很复杂。除非有人知道如何在CSS中使用content关键字，否则无法在元素末尾添加空格。而且，如果其他人正在查看此实现，但他们不知道这种设计的意图，则可能会发生一些意外更改，最终会破坏该实现。

有没有更好的方法来解决原始问题？有。这是我最后提出的实现：

<div class="row"><div class="col-xs-12"><span ng-repeat="item in vm.keywords"><span class="label label-info">{{item}}</span></span></div>
</div>

你能看到这里的区别吗？我所做的只是取出外部span元素的CSS类“space”。如果您已经猜到了，您可能以为不需要放在最后的空格。当外部使用ngRepeat进行span复制时，最终的DOM元素将如下所示：

<div class="row"><div class="col-xs-12"><span ... ><span class="label label-info">{{item #1}}</span></span><span ... ><span class="label label-info">{{item #2}}</span></span><span ... ><span class="label label-info">{{item #3}}</span></span><span ... ><span class="label label-info">{{item #4}}</span></span><span ... ><span class="label label-info">{{item #5}}</span></span><span ... ><span class="label label-info">{{item #6}}</span></span>...</div>
</div>

使用此类DOM元素表示，每个span元素之间有足够的空间。因此，根本没有必要在CSS类规范中添加额外的空间。如果我从不说要用另一个span元素包装一个span元素。我永远无法得出这个结论。我觉得这是我陷入困境的解决方案。

这是所有三种对齐方式的屏幕截图：

首先是有问题的实现。第二个是CSS类的解决方案。最后一个是我删除CSS类的那个，它仍然按预期工作。因此，根本不需要新的CSS类。

总结

就是这个。这是一个简短的教程。我对本教程的目标很简单。首先，我只想向您展示使用ngRepeat并且span不进行任何包装是一个坏主意。将所有span元素放在一行中会导致问题。当页面的整体宽度变小时，它们将不会重新对齐为多行。第二个目标是讨论我如何学习使用CSS和HTML 5添加新的文本内容。这对于将来的项目可能很有用。最后，我吸取的教训是我可以将一个span内部包装在另一个span元素中。这使我可以在外部span元素中使用ngRepeat指令，而将内部span元素用于实际的显示装饰。原来包装span 实现无需复杂的设计即可解决此问题（使用CSS在HTML元素的末尾添加空格）。

如何在ngRepeat中使用Bootstrap Span元素相关推荐

html h1怎么居中,如何在h1标签内水平居中span元素？
Home 而这个CSS: h1#page-title { background: transparent url(../images/line.png) 0px 6px no-repeat; over ...
matlab矩阵行位列维,如何在Matlab中对行矩阵的元素进行不等长度分组
我在Matlab中有一个位流,以行矩阵的形式.例如[0 0 1 1 0 1 1 1 0 1 0 1 1 0 1 1 ...]如果它们匹配某个位组合,我想将它们分组成不等长的帧......任何想法我该怎 ...
如何在AngularJS中使用ng-repeat迭代键和值？
本文翻译自:How to iterate over the keys and values with ng-repeat in AngularJS? In my controller, I have ...
jquery 获取同级元素_如何在jQuery中获取元素的同级
jquery 获取同级元素 In this post, we will discuss how to get the siblings of an HTML element in jQuery. jQ ...
boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...
java 查找链表中间元素_如何在Java中一次性查找Java中链表的中间元素
如何在一次传递中找到LinkedList的中间元素?这是一个 Java 和非Java程序员面试时经常被问到的编程问题.这个问题类似于检查回文或计算阶乘,有时也会要求编写代码.为了回答这个问题,候选人必 ...
webapp 中为span元素赋值
span元素赋值方式有三种: $("span").val("xxx"); $("span").html("xxx"); ...
如何在Java中处理ConcurrentModificationException？在循环中从ArrayList中删除元素时要当心...
从Java中从ArrayList中删除元素时常见的问题之一是ConcurrentModificationException. 如果您对索引使用经典的for循环或增强的for循环,并尝试使用remove ...
css中 Span 元素的 width 属性无效果原因及多种解决方案
先运行下程序看下: <span style='background-color:#336699;width:300px;'>123</span> 输出:123 可以看到 spa ...

如何在ngRepeat中使用Bootstrap Span元素

介绍

在Box里寻找解决方案

开箱即用的解决方案

总结

如何在ngRepeat中使用Bootstrap Span元素相关推荐

最新文章

热门文章