使用 AngularJS 和 Twitter Bootstrap 渲染两列 [关闭]答案

【问题标题】：Rendering two columns with AngularJS and Twitter Bootstrap [closed]使用 AngularJS 和 Twitter Bootstrap 渲染两列 [关闭]
【发布时间】：2015-12-28 08:18:52
【问题描述】：

我正在尝试在两列或更多列中使用 Bootstrap 和 AngularJS 数据进行渲染。

<div ng-repeat="x in experiences_days | orderBy: 'created_at':true | limitTo:totalDisplayed track by x._id" ng-cloak>
   <div class="container">
      <div class="row">
         <div class="col-md-4">
            {{x}}
         </div>
      </div>
   </div>
</div>

它只出现在它们之间。我需要从左到右相邻的两个数据。

这里是一个例子：

http://codepen.io/xmercix/pen/dGpLeY

【问题讨论】：

在旁注中，您意识到您正在重复外部div 内的所有内容，对吧？所以很明显你会得到多个containers，多个rows，等等......
Jup 我得到了多个容器和行？
请包含完整但最少的复制。请参阅这些页面以获取帮助：minimal reproducible example。没有它，我们将猜测解决方案（请注意，我们不应该这样做）。

标签： html css angularjs twitter-bootstrap

【解决方案1】：

使用 col-md-x 类将 ng-repeat 移动到 div

<div ng-cloak>
   <div class="container">
      <div class="row">
         <div class="col-md-4" ng-repeat="x in experiences_days | orderBy: 'created_at':true | limitTo:totalDisplayed track by x._id">
            {{data}}
         </div>
      </div>
   </div>
</div>

container 和 row 类将强制您的下一个 div 进入下一行，这不是您想要的行为。通过在您的内部 div 中包含 col-md-4，您将在每行中有 3 个项目。

【讨论】：

就是这样！非常感谢！