Question

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

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

我尝试了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-eq-height容器的类row。它是bootstraps基本代码的一个很好的补充。这个页面解释了更多，以下是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>

Bootstrap等柱高度

3 个答案: