我正在使用Bootstrap。如何让三根柱子都一样高呢?

下面是问题的截图。我希望蓝色和红色的列和黄色的列一样高。

代码如下:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel" style="background-color: red"> some content </div> <div class="col-xs-4 panel" style="background-color: yellow"> catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> </div> <div class="col-xs-4 panel" style="background-color: blue"> some more content </div> </div> </div>


当前回答

如果任何人使用bootstrap 4并寻找等高列,只需使用row-等高来父div

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="row row-eq-height"> <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div> <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div> <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div> </div>

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

其他回答

我想我只是补充一下,Dr.Flink给出的答案也可以应用到Bootstrap 3表单水平块——如果你想为每个单元格使用背景色,这是非常方便的。为了使这适用于引导表单,您需要包装表单内容,这只是为了复制一个类似表格的结构。

下面的例子还提供了CSS,它演示了一个额外的媒体查询允许Bootstrap 3简单地接管并在较小的屏幕上做正常的事情。这也适用于IE8+。

例子:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>
.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}

对于那些寻找一个快速,简单的解决方案-如果你有一个相对一致的块内容集,在div上设置一个最小高度,比最大的块大一点,可以更容易实现。

.align-box {
    min-height: 400px;
}

不需要JavaScript。只需添加类.row-等式-height到你现有的.row,就像这样:

<div class="row row-eq-height">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
    kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

提示:如果行中有超过12列,引导网格将无法将其包装。添加一个新的div。row。行-等高每12列。

提示:您可能需要添加

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

到HTML

03/19/2019

**Bootstrap 4等高解决方案**

Bootstrap实用工具/flex为相等的高度

活生生的例子在Codepen

由父div固定高度或最小高度的引导类等高

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

.bd-highlight { background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.15); } .fixed-height-200 { min-height: 200px; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <br><br><br> <div class="d-flex align-content-stretch flex-wrap fixed-height-200"> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight bg-danger">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-info">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-primary">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> </div>

我寻找了一个解决同样问题的方法,发现一个方法很有效!!- 几乎没有额外的代码..

参见https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 为了更好的讨论,你想要的答案在底部,有一个链接。

https://www.codeply.com/go/EskIjvun4B

对我来说,这是正确的回应方式。 引用: ... 3 -使用flexbox(最好!)

截至2017年,在响应式设计中制作等高列的最佳(也是最简单)方法是使用CSS3 flexbox。

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

简单地使用:

div class="container">
   <div class="row display-flex .... etc..