在角度ng-repeat中创建bootstrap列，在宽度和对齐方面产生问题

Question

我有一个动态创建bootstrap列的指令。问题是指令列宽度不等于静态创建引导列。 E.g

<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应该是相同的大小并正确对齐。

Answer 1

嗨，我看不到你的指令代码，坚果mayby

出现了问题

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

一旦你有了标题，之后就是configIngo.Titles

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

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

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