Question

我有这段代码

HTML：

<div class="container-fluid">
    <div class="row">

        <div class="col-md-6">
            <p>Line</p>
            <p>Line</p>
            <p>Line</p>
            <p>Line</p>
            <p>Line</p>
            <p>Line</p>

        </div>
        <div class="col-md-6">
            <p>Line2</p>
            <p>Line2</p>

        </div>

    </div>
</div>

如您所见，两列不相等，每列都有高度内容。

我试图在jsfiddle制作这个例子，但很明显我们做了......但我把链接

我尝试导入bootstrap但不能正常工作

我还在文档引导程序中找到了this示例但未能实现它

请帮助我，请执行此示例（如果可能，请在jsdfidle中）？

提前致谢！

Answer 1

尝试将此添加到您的CSS：

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

.row{
  overflow: hidden; 
}

https://jsfiddle.net/DTcHh/12810/

或使用flexbox：

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

https://jsfiddle.net/DTcHh/12811/

Answer 2

这对我很有用，希望它能解决你的均衡问题。

只需应用课程＆＃34; eq_height＆＃34;在DIV中你想要做到平等，并在页面中包含以下代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var highestBox = 0;
        $('.container-fluid .eq_height').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.container-fluid .eq_height').height(highestBox);

});
</script>

这将取最大div的高度并根据它进行均衡。

如何在bootstrap中创建两个相等高度的列？

2 个答案: