Question

我遇到了与使用bootstrap网格和angular / bootstrap模式相关的问题。网格中的内容是复选框，旁边有名称。名称的长度可以变化，因此它们可以包裹到2行（技术上可以包含与名称中的唯一单词一样多的包裹行，但通常是＆lt; = 2）。我看到的奇怪之处在于，如果第一列中有一个名称必须换行，但第二列和第三列的同一行不换行，事情看起来很好，并且没有空行空格。 Screenshot。当第一列没有包裹在给定行上但第二列或第三列必须换行时，第一列（2）中有一个很大的空白空间，但是当第一列是包裹的那一列时，第2列和第3列工作正常（1）。

包裹级联时特别明显，如screenshot 2。

网格的Html：

<div class="row">
 <div ng-repeat="courseStudent in course.students">
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 cell">
    <label>
      <div class="input-wrapper">
        <input type="checkbox" ng-checked="courseStudent.assigned" ng-click="toggleStudent(course,courseStudent)"/>
      </div>
      <div>{{courseStudent.student.name}}</div>
      <div class="clearfix"></div>
    </label>
  </div>
</div>

网格少

.row {
 .input-wrapper {
   float: left;
   width: 14%;
 }
}

是否有人知道如果可能的话，网格是否均匀地折叠空白区域？当我查看开发工具时，该空间甚至不会出现。周围细胞的div都没有填充或似乎占据了那个空间。有什么想法吗？

bootstrap 3.3.1 angularjs 1.2.15 angular-bootstrap 0.10.0

Answer 1

发生这种情况的原因是每个列都使用float left来创建网格。所以，你有几个选择：

如果你知道输入的最大高度，那么你可以给你的细胞类设定一个高度。这可能不是理想的，因为您正在动态生成内容。
使用Masonry之类的插件将内容“适合”到可用空间中。这会产生很酷的平铺效果，但可能不适合您的特定内容。
使用jQuery或vanilla Javascript动态调整列高度，使其等于最高列div的最大高度。

第三个选项的jQuery示例看起来像（实际上，我猜你自己使用AngularJS，你应该在一个指令中执行此操作，但无论如何这是一个例子）：

var row=$('.row');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

P.S。实际上没有必要为每个断点包含一个col类，就像你在这里做的那样：<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 cell">。只需写下<div class="col-sm-4 col-xs-6 cell">即可。将col类视为添加剂。如果要在此时更改行为，则只需在特定断点处指定一个。

Answer 2

正式的Bootstrap答案，@ jme11评论中的链接需要是顶级答案。另请参阅他的bootstrap文档链接。在需要重置的行之间插入此div。

[X,Y,Z] = peaks;
[~, I] = sort(Z(:));
v = Z(I(round(linspace(1, numel(Z),10))));
contour(X,Y,Z,v);
axis equal
colorbar

使用引导网格改变内容高度和间距问题

2 个答案: