问题

我使用Bootstrap.如何让三列的高度相同?

这是一个问题的屏幕截图 - 我想要蓝色和红色列与黄色列的高度相同.

在这里输入图片说明

这是代码:

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

以下是Bootply示例



解决方法

解决方案1使用负边距(不会打断响应)

演示

.row{
    overflow: hidden; 
}

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

解决方案2使用表格

演示

.row {
    display: table;
}

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

使用flex的解决方案3 于2015年8月添加.在此之前发表的评论不适用于此解决方案.

演示

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



相关问题推荐