Bootstrap 网格动态列

Question

我的页面上有下表：

<table>
    <tr>
        <td ng-repeat="Type in Types">    
                <img ng-src="../../Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" alt="{{Type.TypeName}}" />
        </td>

    </tr>
</table>

我想使用引导网格而不是表格。因此，如果页面上有 3 张图片，我将拥有：

<div class="row">
    <div class="col-md-4"> </div>
    <div class="col-md-4"> </div>
    <div class="col-md-4"> </div>
</div>

但是由于图像的数量是动态的（尽管它永远不会大于 12），所以我不能在 col-md* 中使用固定的数字。所以我必须做这样的事情：

<div class="row" ng-repeat="Type in Types">
    <div class="col-md-{{12 / Types.length}}">
        <img ng-src="../../Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" alt="{{Type.TypeName}}" />
    </div>
</div>

但现在我将每张图片放在自己的行中，而不是在一列中（一个在另一个之下）。我如何将它们全部放在一行中？

Answer 1

将 ng-repeat 移至 col:

<div class="row">
  <div class="col-md-{{width}}" ng-repeat="Type in Types">
      {{$index}}
  </div>
</div>

Plunk 以全屏模式查看