查看 bootstrap 中的默认标签列表

Question

我想使用 angular-js ng-repeat

查看 bootstrap 默认标签格式的字符串列表

以下是一段代码，

<div class="row">
  <div class="col-md-12">
    <span ng-repeat="hobby in hobbies" class="label label-default col-md-2">{{hobby.name}}</span>
  </div>
</div>

上面的输出看起来不太好。默认标签填充 col-md-2 并且如果列表很大则它超出行 div.

我想要如下输出

如何使用来自 bootstrap 类的默认标签实现跟随？

和 我只想使用 bootstrap 提供的 classes/styles 而不是自定义 css.

Answer 1

您不需要 span 元素上的 col-md-2 class:

<div class="row">
  <div class="col-md-12">
    <span ng-repeat="hobby in hobbies" class="label label-default">{{hobby.name}}</span>
  </div>
</div>

您可以在 bootstrap website

上阅读更多关于标签变体的信息

来自 bootstrap website 的注释：

Have tons of labels? Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.

更新

如果您直接在 label label- 上使用 ng-repeat 指令，您最终可能会得到标签之间没有间距的标签。这与此相关 question and this question

您最终可能会得到如下所示的标签：

我创建了一个 jsfiddle 来显示这两个结果，您可能需要更新 HTML 以解决间距问题。

如果您不想添加带边距的自定义 class，可以使用以下 HTML 来解决问题：

<div class="row">
    <div class="col-sm-12">
      <span ng-repeat="label in labels">
       <span class="label label-default">{{label}}</span>
      </span>
    </div>
  </div>

结果：

Answer 2

Tjaart van der Walt 的回答 看起来 perfect.I 也解决了问题并找到了以下答案，

<div class="row">
  <ul class="list-inline col-md-6">
    <li ng-repeat="hobby in hobbies">
      <span class="label label-default">{{hobby.name}}</span>
    </li>
  </ul>
</div>

查看 bootstrap 中的默认标签列表

View list of default-label in bootstrap

html

css

twitter-bootstrap-3

angular-bootstrap

更新