如何在引导程序中创建两个相等高度的列? [英] How can I make two equal height columns in bootstrap?

问题描述

我有这个代码

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>

您会看到两列不相等，每列都有一个高度内容.

As you can see two columns are not equal and each has a height content.

我试图在 jsfiddle 中创建此示例，但显然我们做到了……但是我把链接

I tried to make this example in jsfiddle but clearly we did ... but I put the link

我尝试导入引导程序但无法正常工作

I tried to import bootstrap but not working

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

I also found this example in the documentation bootstrap but failed to implement it

您能帮我实现这个示例吗(如果可能，请在jsdfidle中实现)?

Can you help me please implement this example (if possible in jsdfidle)?

提前谢谢！

推荐答案

尝试将其添加到CSS:

try adding this to your CSS:

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

.row{
  overflow: hidden; 
}

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

或使用flexbox:

Or use flexbox:

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

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

这篇关于如何在引导程序中创建两个相等高度的列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！