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 on floats：

  

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

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

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

---

使用CSS清除属性

来自MDN on Clear：

  

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

对于这个确切的结构，您可以使用nth-child selector将clear应用于其他每一行：

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

  

注意：nth-child selector won't work in 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

Bootstrap way to do this是使用applies the following styles：

的clearfix类

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

  

注意：您可以选择定位不同的屏幕尺寸，方法是将其与responsive utility classes（.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>