在引导程序中使列的高度相同答案

【问题标题】：Make columns the same height in bootstrap在引导程序中使列的高度相同
【发布时间】：2015-08-09 05:06:45
【问题描述】：

我在一行中有三列。我希望所有三列都具有相同的高度（填满整个空白区域）

目前，它看起来像这样：

如您所见，左列是正确的高度。中间和右边不在的地方。

它的脚手架是这样的：

<div class="container">
    <div class="row">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
    </div>
</div>

我尝试将中间和右侧的跨度高度设为 100%，但这并没有做到。有人可以指导我正确的方向吗？

我正在使用最新版本的 Twitter Bootstrap

【问题讨论】：

您在第一个标签的末尾缺少> - <div class="container"。
“最新版本的 Twitter Bootstrap”目前有点模棱两可——你是指稳定的 2.3.2 还是 3.0.0-RC2 分支？
你知道哪一列最长吗？
@ItayItai 是的，--menu-- (span3) 最长。
如果您知道菜单总是最长的，请参阅我编辑的答案。

标签： jquery css twitter-bootstrap

【解决方案1】：

我发现这个 bootstrap 3 的解决方案对我很有用

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

它使用这些样式：

/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display:table-row;
}
.col-xs-height {
    display:table-cell;
    float:none;
}
@media (min-width: 768px) {
    .container-sm-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-sm-height {
        display:table-row;
    }
    .col-sm-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 992px) {
    .container-md-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-md-height {
        display:table-row;
    }
    .col-md-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}
/* vertical alignment styles */
.col-top {
    vertical-align:top;
}
.col-middle {
    vertical-align:middle;
}
.col-bottom {
    vertical-align:bottom;
}

还有这个标记

<div class="container container-xs-height">
    <div class="row row-xs-height">
        <div class="col-xs-6 col-xs-height"></div>
        <div class="col-xs-3 col-xs-height col-top"></div>
        <div class="col-xs-2 col-xs-height col-middle"></div>
        <div class="col-xs-1 col-xs-height col-bottom"></div>
    </div>
</div>

【讨论】：

感谢您发布 Bootstrap 特定解决方案。这似乎是迄今为止最好的。
同意，这个解决方案对我来说似乎是最好的。
@alex 在什么情况下？

【解决方案2】：

你可以在没有 JS 的情况下解决这个问题。只需使用

bottom: 0;
top: 0;
position: absolute; /* The container must have position: relative */

它有魔法:)

我做了一个例子： http://fiddle.jshell.net/E8SK6/1

结果： http://fiddle.jshell.net/E8SK6/1/show/

编辑：

由于您在评论中说菜单始终是最大的，因此您可以使用这个新示例： http://fiddle.jshell.net/E8SK6/5/

如果您不知道其中哪一个最长，也许this thread 上的答案会更好。它使用显示：表格单元格。 Here就是例子

【讨论】：

位置设置为绝对位置，但在您的 cmets 中您必须将其设置为相对位置。我应该使用什么？ :-)
内部位置是绝对的，但包装元素是相对的

【解决方案3】：

啊，这是一个古老的问题。

如果你在一个元素上设置了 100% 的高度，它的父级需要一个设置的高度才能让它消失。由于 div.row 的高度是可变的，因此这是行不通的。

解决方法是：

在div.row 上设置一个固定高度（如果您想要流畅的设计，这可能不是一个好主意）

或

使用 jQuery 来实现：

HTML

<div class="row equalHeight">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
</div>

jQuery

$('.equalHeight').each(function() {
  var eHeight = $(this).innerHeight();

  $(this).find('div').outerHeight(eHeight);
});

【讨论】：

【解决方案4】：

今天可以row-eq-height

链接： http://getbootstrap.com.vn/examples/equal-height-columns/

【讨论】：

请注意，这里使用的是 flexbox，IE9 或更低版本不支持。