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

【问题标题】：Varying content height and spacing issues using bootstrap grid使用引导网格改变内容高度和间距问题
【发布时间】：2015-07-12 02:34:16
【问题描述】：

我有一个与在 angular/bootstrap 模态中使用引导网格有关的问题。网格中的内容是旁边带有名称的复选框。名称的长度可能会有所不同，因此它们可能会换行至 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 都没有填充或似乎占据了该空间。有什么想法吗？

引导程序 3.3.1 角度js 1.2.15 角度引导 0.10.0

【问题讨论】：

尝试将每组 3 个复选框包装在一个新的 <div class="row">
这在这种情况下不起作用，因为这只会导致只有 1 列。使用网格的重点是允许列数根据显示大小动态变化，如果我尝试每行固定数量的列，那么我不妨只使用一个实际的表格，除非我遗漏了什么，我做到了试试看可以确定。

标签： css angularjs twitter-bootstrap-3

【解决方案1】：

发生这种情况的原因是每一列都使用左浮动来创建网格。因此，您有两种选择：

如果您知道输入的最大高度，则可以为单元类设置一个高度。这可能并不理想，因为您是在动态生成内容。
使用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);
    });
});

附：真的没有必要像你在这里所做的那样为每个断点包含一个 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 类视为添加剂。如果你想改变那个点的行为，你只需要在一个特定的断点处指定一个。

【讨论】：

酷，感谢您提供的信息。我曾考虑过高度修复，但它可能看起来不太好，但周一我会试一试您的建议并找出最有效的方法。
您可以查看我在此处发布的替代方案：stackoverflow.com/questions/24494409/…。它基于新发布的 3.2.0（就在上周）。抱歉，我没有早点看到公告。
这看起来很有希望，我会一有机会就探索它，我不得不继续执行一项新任务，但我很快就会回到这个错误上。感谢您的帮助！

【解决方案2】：

@jme11 评论中的链接中的官方 Bootstrap 答案必须是顶级答案。另请参阅他的引导文档链接。在需要重置的行之间插入这个 div。

 <!-- Add the extra clearfix for only the required viewport -->
 <div class="clearfix visible-xs-block"></div>

【讨论】：