在Bootstrap中使列高度相同

Question

我有一个包含三个列的行。我希望这三列都具有相同的高度（填满整个白色空间）。

目前，它看起来像这样：

如您所见，左侧列的高度是正确的，而中间和右侧列则不是。

其框架如下所示：

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

我尝试将中间和右侧的span高度设置为100％，但这样并没有起作用。请问有人能指导我正确的方向吗？

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

- oliverbj

---

你在第一个标签 <div class="container" 的结尾缺少了 >。 - Mateusz

目前，“Twitter Bootstrap的最新版本”有点含糊不清 - 你是指稳定的2.3.2版本，还是3.0.0-RC2分支？ - Bojangles

你知道哪一列是最长的吗？ - Itay

@ItayItai 是的，--菜单--（span3）是最长的。 - oliverbj

如果你知道菜单总是最长的，可以看看我的编辑后的答案。 - Itay

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

- Maurizio Pozzobon

---

感谢您发布Bootstrap特定的解决方案。这个看起来是目前为止最好的一个。 - Thilak Rao

同意，这个解决方案对我来说似乎是最好的。 - Ignacio Soler Garcia

@alex 在什么上下文环境中？ - Maurizio Pozzobon

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

如果您不知道它们中哪一个是最长的，也许这个帖子上的答案更好。 它使用display: table-cell。 这里是例子

- Itay

---

位置被设置为绝对定位，尽管在您的评论中写道它必须设置为相对定位。我应该使用什么？ :-) - oliverbj

内部位置是绝对的，但包装元素是相对的。 - Itay

Answer 3

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

如果您在元素上设置100％的高度，则其父级需要设置高度才能偏移。由于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);
});

- CaribouCode

Answer 4

今天，使用row-eq-height是可能的。

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

- candlejack

---

作为一条注释，这里使用了 flexbox 布局，该布局在 IE9 及以下版本中不被支持。 - contactmatt