html – Bootstrap 50%的.row

我刚刚开始使用bootstrap,我有一个嵌套高度百分比的问题.例如,我有一个带有.col-sm-8和.col-sm-4的.row. .col-sm-8中有大量内容,它确定了列的高度,它是父.row.但是,当我想将2个div(.map和.contact)设置为50%高度时,它会给我留下这样的东西.

《html – Bootstrap 50%的.row》

即使这两个div中都没有内容,我的.row高度也比过去高得多.我如何完成一个看起来像下一张图片中的布局的布局,以便.row,.map和.cotact的高度完全依赖于由其中的内容确定的第一列高度.
我不知道究竟会导致这个问题.我希望你明白我的意思:)

《html – Bootstrap 50%的.row》

最佳答案 在你的.row上添加css:

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

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

点赞