使列在引导中具有相同的高度 [英] Make columns the same height in bootstrap

问题描述

我在一行内有三列。我希望所有三个列具有相同的高度（填满整个空格）

I have three columns inside a row. I want all three columns to have the same height (fill the entire white space out)

目前，它看起来像这样：

Currently, it looks like this:

>

如您所见，左栏是正确的高度。

As you can see, the left column is the correct height. Where the middle and the right aren't.

它的架构看起来像这样：

The scaffolding of it looks like this:

<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％，但是，做它。

I've tried to give the middle and the right span height of 100%, but that doesn't do it. Can anybody guide me in the correct direction?

我使用的是最新版本的Twitter Bootstrap

I am using the latest version of Twitter Bootstrap

推荐答案

你可以解决这个没有JS。
只需使用

You can solve this without JS. Just use

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/

Since you said on a comment that the menu is always the biggest, you can use this new example: http://fiddle.jshell.net/E8SK6/5/

如果您不知道其中的哪一个是最长的，也许对此主题的回答更好。它使用display：table-cell。 这里是示例

If you don't know which one of them is the longest, maybe the answer on this thread is better. It uses display: table-cell. Here's the example

这篇关于使列在引导中具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！