Bootstrap等高柱

Question

我正在尝试使Bootstrap列的高度相同。 现在，如果一列的内容比另一列的内容多，则这些列会浮动，并且看起来不会“方形”。

这是我的意思的一个小例子：

https://jsfiddle.net/jjq9gygr/

我尝试了display: flex方法，但是由于我的html每3 col-xs-4列都没有一个新的.row容器，因此所有列都在同一行上，而不是换行到3列之后的下一行。 我希望这是有道理的。

如果有一种方法可以保持HTML不变并获得结果，那么我追求的很好。 任何想法或建议都是有帮助的。

<div class="container">
<div class="row">
    <div class="col-xs-4 red">
  <h3>
  Column 1
  </h3>
        <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
    </div>
    <div class="col-xs-4 pink">
<h3>
  Column 2
  </h3>
        <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
    </div>
    <div class="col-xs-4 yellow">
  <h3>
  Column 3
  </h3>
        <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
    </div>
    <div class="col-xs-4 orange">
  <h3>
  Column 4
  </h3>
        <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
    </div>
    <div class="col-xs-4 blue">
  <h3>
  Column 5
  </h3>
        <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
    </div>
    <div class="col-xs-4 green">
  <h3>
  Column 6
  </h3>
        <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
    </div>
    <div class="col-xs-4 navy">
  <h3>
  Column 7
  </h3>
        <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
    </div>
</div>

Answer 1

告诉您的行flex容器并告诉它们包装。

.row {
    display: flex;
    flex-wrap: wrap;
}

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .row { display: flex; flex-wrap: wrap; } .col-xs-4 { margin-bottom: 30px; } .red { background-color: red; } .pink { background-color: pink; } .yellow { background-color: yellow; } .orange { background-color: orange; } .blue { background-color: MediumTurquoise; } .green { background-color: green; } .navy { background-color: PaleGoldenRod; } 

 <div class="container"> <div class="row"> <div class="col-xs-4 red"> <h3>Column 1</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-xs-4 pink"> <h3>Column 2</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-xs-4 yellow"> <h3>Column 3</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-xs-4 orange"> <h3>Column 4</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-xs-4 blue"> <h3>Column 5</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-xs-4 green"> <h3>Column 6</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-xs-4 navy"> <h3>Column 7</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> </div> </div> 

如果您只是开始您的项目，则可以切换到Bootstrap 4 ，它已将flexbox烘焙到网格系统中。 由于BS4没有xs您需要对列类进行较小的调整，从.col-xs-4到.col-4 。

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'); .col-4 { margin-bottom: 30px; } .red { background-color: red; } .pink { background-color: pink; } .yellow { background-color: yellow; } .orange { background-color: orange; } .blue { background-color: MediumTurquoise; } .green { background-color: green; } .navy { background-color: PaleGoldenRod; } 

 <div class="container"> <div class="row"> <div class="col-4 red"> <h3>Column 1</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-4 pink"> <h3>Column 2</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-4 yellow"> <h3>Column 3</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-4 orange"> <h3>Column 4</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-4 blue"> <h3>Column 5</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-4 green"> <h3>Column 6</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> <div class="col-4 navy"> <h3>Column 7</h3> <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p> </div> </div> </div> 

Answer 2

您要查找的是连接到row容器的.row-eq-height类。 它是引导程序基础代码的重要补充。 此页面解释了更多，以下是CSS突出显示了您需要的内容。

http://getbootstrap.com.vn/examples/equal-height-columns/

 /*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

/*
 * Styles copied from the Grid example to make grid rows & columns visible.
 */
.container {
  padding-right: 15px;
  padding-left: 15px;
}

h4 {
  margin-top: 25px;
}
.row {
  margin-bottom: 20px;
}
.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

/*
 * Callout styles copied from Bootstrap's main docs.
 */
/* Common styles for all types */
.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border-left: 3px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code {
  background-color: #fff;
  border-radius: 3px;
}
/* Variations */
.bs-callout-danger {
  background-color: #fdf7f7;
  border-color: #d9534f;
}
.bs-callout-danger h4 {
  color: #d9534f;
}
.bs-callout-warning {
  background-color: #fcf8f2;
  border-color: #f0ad4e;
}
.bs-callout-warning h4 {
  color: #f0ad4e;
}
.bs-callout-info {
  background-color: #f4f8fa;
  border-color: #5bc0de;
}
.bs-callout-info h4 {
  color: #5bc0de;
}

Answer 3

您可以只使用JQ插件jquery.matchHeight.js ，该插件也可以在其他html框架上使用，只需使用：

https://github.com/liabru/jquery-match-height

您可以通过JS使用：

$('.row .col-xs-4').matchHeight();

或使用数据：

<div class="col-xs-4 red" data-mh="my-group">Red</div>
<div class="col-xs-4 blue" data-mh="my-group">Blue</div>