标签框100％Bootstrap行的高度

Question

我正在使用自定义样式的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;
}

Answer 1

请参阅此演示：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;
}

Answer 2

您可以为标记框设置min-height，例如：

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