如何使Bootstrap列都具有相同的高度？_bootstrap4 col 等高-CSDN博客

本文翻译自：How can I make Bootstrap columns all the same height?

I'm using Bootstrap. 我正在使用Bootstrap。 How can I make three columns all the same height? 如何使三根柱子的高度相同？

Here is a screenshot of the problem. 这是问题的屏幕截图。 I would like the blue and red columns to be the same height as the yellow column. 我希望蓝色和红色列与黄色列的高度相同。

三个引导程序列，中间列比其他两列长

Here is the code: 这是代码：

 <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>

#1楼

参考：https://stackoom.com/question/1Kdlw/如何使Bootstrap列都具有相同的高度

#2楼

Solution 4 using Bootstrap 4 使用Bootstrap 4的解决方案4

Bootstrap 4 uses Flexbox so there's need for extra CSS. Bootstrap 4使用Flexbox，因此需要额外的CSS。

Demo 演示版

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

Solution 1 using negative margins (doesn't break responsiveness) 解决方案1使用负边距（不会破坏响应能力）

Demo 演示版

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Solution 2 using table 解决方案2使用表

Demo 演示版

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution. 使用Flex的解决方案3已于2015年8月添加。此之前发布的注释不适用于此解决方案。

Demo 演示版

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

#3楼

You only show one row so your use case may be limited to just that. 您只显示一行，因此您的用例可能仅限于此。 Just in case you have multiple rows, this plugin - github Javascript-grids - works perfectly! 万一您有多行，这个插件-github Javascript-grids-可以完美地工作！ It makes each panel expand to the tallest panel, giving each row potentially a different height based on the tallest panel in that row. 它使每个面板都可以扩展到最高的面板，从而基于该行中的最高面板为每一行提供不同的高度。 It's a jquery solution vs. css, but wanted to recommend it as an alternative approach. 与CSS相比，这是一个jquery解决方案，但想推荐它作为替代方法。

#4楼

Thought I'd just add that the answer given by Dr.Flink can also be applied to a Bootstrap 3 form-horizontal block - which can be very handy if you want to use background colours for each cell. 以为我只是补充说，Dr.Flink给出的答案也可以应用于Bootstrap 3 form-horizontal块-如果您要为每个单元格使用背景色，这将非常方便。 In order for this to work for bootstrap forms, you would need to wrap the form contents which just serves to replicate a table-like structure. 为了使它适用于引导表单，您需要包装表单内容，该内容仅用于复制类似表格的结构。

The example below also provides the CSS which demonstrates an additional media query allows Bootstrap 3 to simply takeover and do it's normal thing on the smaller screen(s). 下面的示例还提供了CSS，该CSS演示了一个附加的媒体查询，该查询使Bootstrap 3可以简单地接管并在较小的屏幕上正常进行。 This also works in IE8+ . 这在IE8 +中也适用。

Example: 例：

<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;
  }
}

#5楼

Update 2018 更新2018

Best approach for Bootstap 3.x -- using CSS flexbox (and requires minimal CSS).. Bootstap 3.x的最佳方法 -使用CSS flexbox （并且需要最少的CSS）。

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

Bootstrap same height flexbox example Bootstrap相同高度的Flexbox示例

To only apply the same height flexbox at specific breakpoints (responsive), use a media query. 要仅在特定的断点处应用相同高度的flexbox（响应），请使用媒体查询。 For example, here is sm (768px) and up: 例如，这是sm （768px）及以上：

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

This solution also works well for multiple rows (column wrapping): 此解决方案也适用于多行（列包装）：
https://www.bootply.com/gCEXzPMehZ https://www.bootply.com/gCEXzPMehZ

Other workarounds 其他解决方法

These options will be recommended by others, but are not a good idea for responsive design. 这些选项将由其他人推荐，但对于响应式设计不是一个好主意 。 These only work for simple single row layouts w/o column wrapping. 这些仅适用于不带列换行的简单单行布局。

1) Using huge negative margins & padding 1）使用巨大的负边距和填充

2) Using display:table-cell (this solution also effects the responsive grid, so a @media query can be used to only apply table display on wider screens before the columns stack vertically) 2）使用display：table-cell （此解决方案还会影响响应网格，因此@media查询只能用于在垂直堆叠列之前在更大的屏幕上应用table显示）

Bootstrap 4 引导程序4

Flexbox is now used by default in Bootstrap 4 so there is no need for the extra CSS to make equal height columns: http://www.codeply.com/go/IJYRI4LPwU 现在默认情况下在Bootstrap 4中使用了Flexbox，因此不需要额外的CSS来制作等高的列： http : //www.codeply.com/go/IJYRI4LPwU

Example: 例：

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

#6楼

You can use inline-flex as well which works pretty good and may be a little cleaner than modifying every row element with CSS. 您也可以使用inline-flex，效果非常好，并且可能比使用CSS修改每个行元素更简洁。

For my project I wanted every row who's child elements had borders to be the same height so the borders would look jagged. 对于我的项目，我希望每一行的子元素的边框都具有相同的高度，以使边框看起来参差不齐。 For this I created a simple css class. 为此，我创建了一个简单的CSS类。

.row.borders{
    display: inline-flex;
    width: 100%;
}