Question

我正在使用bootstrap作为网格。

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

<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视图。

我希望网格中的所有元素在不离开任何地方的情况下正确对齐。

任何人都可以帮助我吗？

Answer 1

以下是您要找的内容：http://jsfiddle.net/ewNc6/

诀窍是插入一个清除：两个＆＃39;在每一行的第一行。

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

这通常会将代码与行数联系起来，但是<div class="col-md-4"也是如此，所以在这样做时你可能没问题。

Answer 2

使用bootstrap并不是完全可能的。为了解释原因，.col-md-4类具有css属性float: left，这意味着无论何时打开最右边的框，左侧元素都采用右框的高度，因此不允许任何其他它下面的盒子。

您可以通过为行中的每个最后一个元素{在您的情况下使用float:right提供.col-md-4:nth-child(3n){ float:right; }来使左右元素正常工作，就像在 demo中一样，但中间元素无法帮助，因为它仍在float:left下。

对于您的要求，我建议您使用像Masonry这样的JS库，它可以完全满足您的需求，并且在容器具有可变高度并且您希望紧密修复它们的情况下使用它，不会留下任何间隙。

根据高度排列列

2 个答案: