在角度 ng-repeat 中创建引导列会导致宽度和对齐问题答案

【问题标题】：Creating bootstrap columns in angular ng-repeat making issue in width and alignment在角度 ng-repeat 中创建引导列会导致宽度和对齐问题
【发布时间】：2015-06-13 10:37:51
【问题描述】：

我有一个指令可以动态创建引导列。问题是指令列的宽度不等于静态创建的引导列。例如

<my-directive></my-directive>
<div class="row">
  <div  style="background:green" class="col-md-4 col-sm-4">
  </div>
   <div  style="background:green" class="col-md-4 col-sm-4">
  </div>
   <div  style="background:green" class="col-md-4 col-sm-4">
  </div>
</div>

mydirectiveview.html

div class="row">
  <div  style="background:red" ng-repeat="tile in Tiles" ng-init="colsspan=12/configInfo.Tiles.length" class="col-sm-{{colsspan}} col-xs-12 col-md-{{colsspan}}>
  </div>
</div>

我的问题是指令 div 的宽度与静态创建的 div 相比不相等，因此 div 没有正确对齐

任何人都可以帮助我吗？我希望在 html 文件中创建的指令 div 和 div 应该是相同的大小并且正确对齐。

【问题讨论】：

标签： angularjs twitter-bootstrap

【解决方案1】：

你好，我看不到你的指令代码，疯子，也许

有问题

> ng-repeat="tile in Tiles"
> 
> ng-init="colsspan=12/configInfo.Tiles.length"

一旦你有了 Titles，然后是 configIngo.Titles

请在此处查看工作解决方案

http://plnkr.co/edit/QoPL5xydTXoX17tV1XZd?p=preview

【讨论】：

【解决方案2】：

行类的行为不像表。它将自动调整其高度和宽度。我会推荐你使用 Table 来实现平滑的布局。

<table class="table table-bordered ">
                <thead>
                    <tr>
                        <th>h1</th>
                        <th>h2</th>
                        <th>h3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="grid in gridData">
                        <td>{{grid.h1}}</td>
                        <td>{{grid.h2}}</td>
                        <td>{{grid.h3}}</td>
                    </tr>
                </tbody>
            </table>

【讨论】：