bootstrap 3中的等高列答案

【问题标题】：equal height columns in bootstrap 3bootstrap 3中的等高列
【发布时间】：2015-02-13 02:02:25
【问题描述】：

我有以下html：

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="phone-and-email">
                <p>+44 (0)7950 123 456 info@example.co.uk</p>
            </div>
        </div>
        <div class="col-md-10">
            <div class="icons">
                <div class="row">
                    <div class="col-md-4">
                        <img src="images/info.png" class="pull-left"/>
                        <p>How to buy</p>
                    </div>
                    <div class="col-md-4">
                        <img src="images/delivery.png" class="pull-left"/>
                        <p>Free Delivery</p>
                    </div>
                    <div class="col-md-4">
                        <img src="images/gift.png" class="pull-left"/>
                         <p>Gift Vouchers</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

css:

.phone-and-email, .icons {
    border-top: 2px black solid;
    border-bottom: 2px black solid;
}

我无法使左列与右列的高度相同，我尝试了大约 5 种不同的解决方案。它确实可以使用 javascript，但如果可能的话，我宁愿使用 css。

外观：

它应该是什么样子：

【问题讨论】：

为什么不直接设置所有这些列的高度？使它们都像 80px 的高度。它看起来好像您展示的内容始终保持不变。
CSS-Tricks 展示了几种方法；特别是，使用display: table。

标签： html css twitter-bootstrap-3

【解决方案1】：

一种可能的解决方案是利用显示表格的行和表格单元格来实现两个网格部分的高度相等。

检查这个bootply。

HTML：

<div class="container">
    <div id="onerow" class="row">
        <div class="col-md-2 sameheight">
            <div class="phone-and-email">
                <p>+44 (0)7950 123 456 info@example.co.uk</p>
            </div>
        </div>
        <div class="col-md-10 sameheight icons">
            <div>
                <div class="col-md-4">
                    <img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
                    <p>How to buy</p>
                </div>
                <div class="col-md-4">
                    <img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
                    <p>Free Delivery</p>
                </div>
                <div class="col-md-4">
                    <img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
                    <p>Gift Vouchers</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.phone-and-email, .icons {
    border-top: 2px black solid;
    border-bottom: 2px black solid;
}

img{
  height:20px;
  width:20px;
}

#onerow{
  display: table;
}

.sameheight {
    float: none;
    display: table-cell;
    vertical-align: top;
}

【讨论】：