css - Bootstrap等高列

标签 css twitter-bootstrap

<分区>

考虑下面的代码:

<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>

我希望侧边栏始终具有右栏的高度。

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

最佳答案

使用表格方法。它适用于所有浏览器。将 display: table 给父级,将 display: table-cell 给子级。

.row {
    display: table;
}

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

这是 fiddle

另一个很酷的方法是借助边距。

.row{
    overflow: hidden; 
}

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

这是 fiddle

关于css - Bootstrap等高列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34553621/

相关文章:

html - CSS "frameworks"是浏览器异常的原因吗?

html - 使用 padding-top 保留流体布局的纵横比时,如何将文本垂直居中放置在背景图像上?

css - 弹出窗口没有获得完整的导航栏大小

css - Bootstrap 表固定 header colspan 不起作用

css - Bootstrap 事件菜单向上箭头设置背景

css - 使用 Materialize-CSS 的表单输入字段太小

jquery 剪贴板插件和 Bootstrap 3 工具提示

css - 带背景/边框的响应式视频

css - Bootstrap - 响应式菜单修复

html - 为 Hover 修改 Dropdown-Toggle