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>

我想使用bootstrap网格而不是表格。因此，如果页面上有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以全屏模式查看

Bootstrap网格动态列

1 个答案: