Bootstrap标签类没有包装

Question

我正在执行标签的ng重复

<span class="label label-primary" style="margin-right:5px;" ng-repeat="a in data.tags">{{a.tagName}}</span>

如果输出是多个标签，它会离开屏幕，而不是根据我所拥有的列表大小相应地进行换行。

参见示例：http://www.bootply.com/119412

是什么给出的？

谢谢！

Answer 1

更改显示：内联到内联块修复此问题。

<span class="label label-primary" style="margin-right:5px; display:inline-block" ng-repeat="a in data.tags">{{a.tagName}}</span>

Answer 2

我尝试使用@angular，但它改变了Bootstrap 3中标签填充的外观。

所以我进一步调查了一下。问题是标签之间没有空格，所以没有什么可以包装的。一个简单的解决方法是将标签封装在另一个跨度中，并在内跨距之前或之后放置一个空格。

display: inline-block

由于内部空间前面的格式化而产生的空白足以包裹点。如果你把它全部放在一行，你需要添加一个显眼的空间。

<span ng-repeat="a in data.tags"> 
    <span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span> 
</span>

如果没有上面的空格，标签就不会换行。

我还尝试了各种<!-- _ conspicuous --> <span ng-repeat="a in data.tags"> <span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span></span> 策略。将它放在标签上本身就会触发包装，但它会切断包装标签的末端。它仍然需要外跨度在视觉上正确。虽然至少对一个类来说，明确的是容器的目的是触发包装：

::after { content: ' '; white-space: normal }

<强>原因

您必须更改文档的结构以获得明显预期的结果，这有点令人讨厌。但是，我认为这是标签本身<style> .wrappable::after { content: ' ' } /* content: '' wraps too */ </style> <span class="wrappable" ng-repeat="a in data.tags"><span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span></span> 的结果。 （有很好的理由以这种方式设置标签......否则，标签内的单词可能会跨越线条。）浏览器会看到一堆无包装元素，它们之间没有间隙。因此，它得出一个合乎逻辑的结论，即元素不应该被分解。制作标签的替代方案＆＃34;正确＃34;是使标签成为一个多元素结构（这就是上面所做的），将不可包装的元素封装在一个可以包装的元素中。但这并不理想，因为容器元素在许多情况下都是多余的。

Answer 3

答案对我有用。我继续前进，并将其添加到我的标签间隔类中，因为重复内的标签没有适当的间距。请参阅下面的课程：

.label-spaced {
    margin-right:5px;
    margin-bottom:5px !important;
    display:inline-block;
}

Answer 4

我玩游戏有点晚了，但这对我有用（仅在Firefox中测试过）：

<span class="label label-default" ng-repeat-start="tag in select.selectedTags">
  {{tag}} <i class="fa fa-times fa-fw cursor-pointer"></i>
</span>
<bwr ng-repeat-end />