引导程序 3 中的等高列
[英] equal height columns in bootstrap 3
本文介绍了引导程序 3 中的等高列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下 html:
<div class="row"><div class="col-md-2"><div class="电话和电子邮件"><p>+44 (0)7950 123 456 info@example.co.uk</p>
<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>如何购买</p>
<div class="col-md-4"><img src="images/delivery.png" class="pull-left"/><p>免费送货</p>
<div class="col-md-4"><img src="images/gift.png" class="pull-left"/><p>礼券</p>
CSS:
.phone-and-email, .icons {边框顶部:2px 黑色实心；边框底部:2px 黑色实心；}
我无法使左列与右列的高度相同，并且我尝试了大约 5 种不同的解决方案.它确实使用 javascript 工作，但如果可能，我宁愿使用 css.
外观:
它应该是什么样子:
解决方案
一种可能的解决方案是利用行和表格单元格的显示表格来实现两个网格部分的高度相等.
检查这个 bootply.
HTML:
<div id="onerow" class="row"><div class="col-md-2 sameheight"><div class="电话和电子邮件"><p>+44 (0)7950 123 456 info@example.co.uk</p>
<div class="col-md-10 sameheight 图标"><div><div class="col-md-4"><img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left"><p>如何购买</p>
<div class="col-md-4"><img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left"><p>免费送货</p>
<div class="col-md-4"><img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left"><p>礼券</p>
CSS:
.phone-and-email, .icons {边框顶部:2px 黑色实心；边框底部:2px 黑色实心；}图片{高度:20px；宽度:20px；}#onerow{显示:表；}.相同高度{浮动:无；显示:表格单元格；垂直对齐:顶部；}
I have the following 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;
}
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.
How it looks:
How it should look:
解决方案
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.
Check this 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;
}
这篇关于引导程序 3 中的等高列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
