根据高度排列列表

我正在使用引导程序进行网格。根据高度排列列表

当列展开时，右边的其他列正确对齐，但留给它的元素未正确对齐。

<div class="row"> 
<div class="repeater" ng-repeat="student in students | filter : query"> 
    <div class="span{{12/columns}} col-sm-6 panel panel-warning"> 
    <div class="panel-body"> 
    <div class="row"> 
    <div class="col-md-5"><img ng-src = "img/{{student.img}}" width="80px;" class="img-circle"></div> 
<div class="col-md-7"> 
    <button class="btn btn-info" style="margin-top:20px;" ng-click="show=!show">{{student.name}}</button> 
     <button type="button" class="close pull-right" ng-click="remove(student)">&times; </button> 
    </div> 
    </div> 
    <table class="table table-striped table-hover" ng-show="show"> 
    <tr><th style="padding-right:0px;">Father Name:</th><td>{{student.fathername}}</td> </tr> 
    <tr><th>Class: </th><td>{{student.class}}</td></tr> 
    <tr><th>Subj1: </th><td>{{student.results.subj1}}</td></tr> 
    <tr><th>subj2: </th><td>{{student.results.subj2}}</td></tr> 
    <tr><th>subj3: </th><td>{{student.results.subj3}}</td></tr> 
    <tr><th>subj4: </th><td>{{student.results.subj4}}</td></tr> 
    </table> 
    </div> 
    </div> 
</div> 
</div>

这里是全屏视图中的小提琴link查看。

我希望网格中的所有元素都能正确对齐而不会留下任何地方。

任何人都可以帮助我吗？

来源

2014-06-09 Vishnu

你能详细解释一下吗？你想要的布局的模拟屏幕截图将是非常有用的 – Bojangles

请通过小提琴[链接]（http://jsfiddle.net/APLfD/6/embedded/result/）并点击按钮，你可以看到那里的视图 – Vishnu

我希望所有元素都能正确对齐而不会留下浪费空间:-) – Vishnu

这不是完全可能的bootstrap。为了解释为什么，.col-md-4类的css属性为float: left，这意味着无论何时打开最右边的框，左侧元素都取右框的高度，因此不允许其下的任何其他框。

你可以得到它在demo致力于为左，右元素给予float:right为该行中的每一个最后的元素（在使用.col-md-4:nth-child(3n){ float:right; }你的情况）喜欢这里，但中间元素不能得到帮助，因为它仍然是在float:left之下。

根据您的要求，我建议您使用一个JS库，如Masonry，它完全符合您的期望，并在容器具有可变高度并且想要紧紧固定它们并保持不变的情况下使用。

来源

2014-06-09 12:47:23

这里是你在找什么：http://jsfiddle.net/ewNc6/

，关键是要插入一个“明确：既”第一每一行的。

<div class="col-md-4" ng-repeat="student in students" style="{{$index % 3 == 0 && 'clear:both'}}">

这通常将代码绑定到的行数，但再也是如此<div class="col-md-4"，所以你可能会这样做的时候是好的。

来源

2014-06-09 07:57:35 victor

谢谢，但我希望剩下的元素在左侧空间中对齐，而不是将它们向下移动。 – Vishnu

根据高度排列列表

回答

相关问题