Question

我连续三列。我希望所有三列具有相同的高度（填满整个空白区域）

目前，它看起来像这样：

enter image description here

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

它的脚手架看起来像这样：

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

如果你不知道哪一个是最长的，那么this thread的答案可能更好。它使用display：table-cell。 Here是一个例子

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

今天可以使用impl<H: ?Sized> Health for Box<H> where H: Health { fn life(&self) -> u8 { (**self).life() } fn hit_for(&mut self, lost_life: u8) { (**self).hit_for(lost_life) } } fn main() { let mut players = vec![ Player { health: Box::new(WimpyHealth(128)) as Box<Health> }, Player { health: Box::new(BuffHealth(128)) as Box<Health> } ]; for player in players.iter_mut() { player.hit_for(42); } println!("{:?}", players[0].life()); println!("{:?}", players[1].life()); }

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

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

4 个答案: