在引導程序中使列具有相同的高度

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>

我試圖給出100％的中間和右側跨度高度，但這並不是這樣。 任何人都可以指導我正確的方向嗎？

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

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>

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。 這是一個例子

Answer 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);
});

Answer 4

今天，可以使用row-eq-height

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