Html 查看引导中的默认标签列表

我想用angular js ng repeat以引导的默认标签格式查看字符串列表

下面是一段代码片段

<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>

{{hobby.name}

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

我想有如下输出

如何使用引导类中的默认标签实现以下操作

---

而且我只想使用引导提供的类/样式，而不是自定义css。

您不需要span元素上的col-md-2类：

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

结果是：

Tjaart van der Walt的答案看起来很完美。我也做了一些尝试，找到了以下答案：

<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>

{{hobby.name}

请参阅更新的答案和间隔问题注释。如果答案有帮助，请记住将其标记为答案。太好了！！Thnx的信息。我还发现了一个使用列表的解决方案。让我给出我的答案，然后让我们决定哪一个最好做正确的标记：）

<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>