Bootstrap流体行柱具有不同的高度

Question

动态地我创建了一组高度略有不同的盒子,并希望在同一行显示2,3或4个(取决于屏幕大小).我用bootstrap尝试了以下标记:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6" style="background-color: red">
      Three<br>Lines<br>Jup
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
  </div>
</div>

我的问题是我的第三栏下方的空间.

 A  B
 C  D
 C  E <- Should wrap to next row, because of C
 F  G

你能说出如何实现这个目标吗？我认识到使用clearfix的建议,但我想这种尝试在使用不同的列数时会导致问题和丑陋的代码.

谢谢你的回答.

Answer 1

问题

问题是所有引导列都试图向左浮动.

从MDN上浮动:

当一个元素浮动时,它将从文档的正常流程中取出.它向左或向右移动,直到它接触其包含盒子的边缘或另一个浮动元素.

因此,当您有不均匀的加高元素时,正确的行为是将它们堆叠在一边.

幸运的是,有很多方法可以纠正预期的行为:

使用CSS Clear属性

来自MDN on Clear:

clear CSS属性指定元素是否可以位于其前面的浮动元素旁边,或者必须在它们下面向下移动(清除)

对于这个确切的结构,您可以clear使用nth-child选择器应用于每隔一行:

.col-xs-6:nth-child(odd) {
    clear: both;
}

注意:第n个子选择器在IE8中不起作用

jsFiddle/Stack Snippets中的演示:

.col-xs-6:nth-child(odd) {
  clear: left;
}
.col-xs-6 {
  border: 1px solid grey;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6 label-warning">
      Three<br/>
      Lines<br/>
      Jump
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
</div>

运用 .clearfix

该引导的方式来做到这一点是使用了clearfix类适用于以下方式:

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

注意:通过将其与响应实用程序类(即.visible-*-*,.hidden-*)相结合,您可以选择性地使用不同的屏幕大小

jsFiddle/Stack Snippets中的演示:

.col-xs-6 {
  border: 1px solid grey;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    
    <div class="clearfix"></div>
    
    <div class="col-xs-6 label-warning">
      Three<br/>
      Lines<br/>
      Jump
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    
    <div class="clearfix"></div>
    
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
</div>

运用 .row

您也可以将每对列包装成一个新行.这是最不可重用的,但如果每组项都形成一个逻辑组,它确实会创建语义标记.

jsFiddle/Stack Snippets中的演示:

.col-xs-6 {
  border: 1px solid grey;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6 label-warning">
      Three<br/>
      Lines<br/>
      Jump
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
  
</div>

固定高度

根据您的使用情况,您可能只需将所有内容都设置为相同的高度.如果您在每列中都有类似的内容并且想要一致的外观网格,这将很有效.

.col-xs-6 {
  height: 7rem;
}

jsFiddle/Stack Snippets中的演示:

.col-xs-6 {
  height: 7rem;
}
.col-xs-6 {
  border: 1px solid grey;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6 label-warning">
      Three<br/>
      Lines<br/>
      Jump
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
</div>