如何使Bootstrap列具有相同的高度？ [英] How can I make Bootstrap columns all the same height?

问题描述

我使用Bootstrap。如何使三列的高度相同？

这里是一个问题的屏幕截图 - 我想蓝色和红色列的高度与黄色柱。

>

这是代码：

 < div class =row> 
< div class =col-xs-12 col-sm-4 panelstyle =background-color：red> 
某些内容
< / div> 
< div class =col-xs-6 col-sm-4 panelstyle =background-color：yellow> 
 kittenz 
< img src =http://placekitten.com/100/100> 
< / div> 
< div class =col-xs-6 col-sm-4 panelstyle =background-color：blue> 
一些更多的内容
< / div> 
< / div> 
  

解决方案1使用负边距（不会破坏响应能力）

演示

  .row {
 overflow：hidden; 
} 
 
 [class * =col  - ] {
 margin-bottom：-99999px; 
 padding-bottom：99999px; 
} 
  

解决方案2使用表格 b
$ b

演示

  .row {
 display：table; 
} 
 
 [class * =col-] {
 float：none; 
 display：table-cell; 
 vertical-align：top 
} 
  

在此之前发布不适用于此解决方案。

演示

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

I'm using 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:

<div class="row">
  <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>

Here is a Bootply example

解决方案

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
    overflow: hidden; 
}

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

Solution 2 using table

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.

Demo

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

这篇关于如何使Bootstrap列具有相同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！