引导50%的.row

Question

我刚开始使用bootstrap，我在百分比嵌套高度方面遇到了问题。例如，我有一个包含.col-sm-8和.col-sm-4的.row。of sm-8中有很多内容，它决定了列的高度和它的父.row。然而，当我想要将两个div (.map和.contact)分别设置为50%的高度时，它会给我留下这样的结果。

​

​

即使在这两个.row中都没有内容，我的div高度也比以前高得多。我如何才能完成一个看起来像下一张图片的布局，使.row、.map和.cotact的高度完全依赖于第一列的高度，这是由其中的内容决定的。我不知道到底是什么导致了这个问题。我希望您理解我的意思:)

​

​

Answer 1

在你的.row上添加css：

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;

更新：jsfiddle：https://jsfiddle.net/xuoxz7zx/2/

Answer 2

css

.clearfix {
    zoom: 1;
}

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
        line-height: 0;
    }

    .clearfix:after {
        clear: both;
    }

HTML

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

Answer 3

您可以使用jQuery轻松完成此操作。

试试这个：

$(function(){
  var correctHeight = ($('.col-sm-8').height) / 2;

  $('.map, .contact').height(correctHeight);
});