引导程序中的等高列3 [英] equal height columns in bootstrap 3

问题描述

我有以下html：

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="phone-and-email">
                <p>[phone] [e-mail]</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种不同的解决方案。

I can't make the left column the same height as the right, and I have tried about 5 different solutions. It does work using javascript but I'd rather use css if possible.

它的外观：

它应该如何：

推荐答案

一个可能的解决方案是使用行和表格单元格的显示表达到两个网格节的相等高度。

One possible solution is to make use of display table for the row and table-cell to achieve the equal height of both grid sections.

请检查此 bootply 。

HTML：

<div class="container">
    <div id="onerow" class="row">
        <div class="col-md-2 sameheight">
            <div class="phone-and-email">
                <p>[phone] [e-mail]</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;
}

这篇关于引导程序中的等高列3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！