引导带等高柱 [英] Bootstrap equal height column

问题描述

考虑以下代码:

<div class="row">
  <div class="col-xs-3"><div id="sidebar">sidebar</div></div>
  <div class="col-xs-3">content content content content content content content content content content content content content content content</div>
</div>

我希望边栏始终具有右列的高度.

I want the sidebar always has the height of the right column.

演示: http://www.bootply.com/FT3DVckZgp

推荐答案

使用表格方法.它适用于所有浏览器.将 display:table 赋予父级，将 display:table-cell 赋予子级.

Use table method. It works in all browsers. Give display: table to parent and display: table-cell to children.

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

这是 小提琴

另一种很酷的方法是在页边距的帮助下.

Another cool method is with the help of margins.

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

这是 小提琴

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