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

时间:2014-06-26 15:20:53

标签: css angularjs twitter-bootstrap-3

我遇到了与使用bootstrap网格和angular / bootstrap模式相关的问题。网格中的内容是复选框,旁边有名称。名称的长度可以变化,因此它们可以包裹到2行(技术上可以包含与名称中的唯一单词一样多的包裹行,但通常是< = 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

2 个答案:

答案 0 :(得分:3)

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

  1. 如果你知道输入的最大高度,那么你可以给你的细胞类设定一个高度。这可能不是理想的,因为您正在动态生成内容。
  2. 使用Masonry之类的插件将内容“适合”到可用空间中。这会产生很酷的平铺效果,但可能不适合您的特定内容。
  3. 使用jQuery或vanilla Javascript动态调整列高度,使其等于最高列div的最大高度。
  4. 第三个选项的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类视为添加剂。如果要在此时更改行为,则只需在特定断点处指定一个。

答案 1 :(得分: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