html - 标签盒引导行的高度为100％

我正在使用具有自定义样式的Bootstrap 3。我有两个标签盒，其中一个的文字少于另一个。我希望标签盒的高度相同。我尝试了身高：100％并显示：块；但这没用。

 

代码：

<div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 ">
                <div class="col-lg-6">
                    <div class="tag-box tag-box-v6 box-shadow shadow-effect-2">
                        <div class="headline">
                        <h4>Hello world1:</h4>
                    </div>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="tag-box tag-box-v6 box-shadow shadow-effect-2">
                <div class="headline">
                    <h4>Hello world2:</h4>
                </div>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                    <p>text</p>
                </div>
            </div>
        </div><!--2nd col-->
    </div><!--offset wrapper col-->
</div>

标签盒代码：

.tag-box  {
padding: 20px;
margin-bottom: 30px;
}

.tag-box-v6 {
background: #fafafa;
border: solid 1px #eee;
}

最佳答案

观看此演示：http://bootply.com/129611

您可以为此使用CSS3 flexbox。只需将equal类添加到标签盒容器中...

.equal, .equal > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

关于html - 标签盒引导行的高度为100％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23031028/