Bootstrap 布局全屏 2 行

Question

在bootstrap 3中，我如何创建一个布局来填满整个屏幕（100% 高度）并且包含如下 2 行（每行 50% 高度）？视图不应滚动。感谢您的帮助

我已经开始使用这个标记，但无法获得我需要的结果：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-lg-12">Top</div>
    </div>
    <div class="row-fluid">
        <div class="col-lg-4">Bottem Left</div>
        <div class="col-lg-4">Bottom Center</div>
        <div class="col-lg-4">Bottom Right</div>
    </div>
</div>

Answer 1

希望对您有所帮助

<div class="container-fluid">
 <div class="row">
  <div class="col-xs-12 col-md-12"><h4>Top row</h4></div>
 </div>
<div class="row">
  <div class="col-xs-4 col-md-4"><h4>Bottom row col 1</h4></p></div>
    <div class="col-xs-4 col-md-4"><h4>Bottom row col 2</h4></div>
    <div class="col-xs-4 col-md-4"><h4>Bottom row col 3</h4></div></div></div>

Answer 2

Bootstrap 不提供执行 100% 高度布局的机制。您需要一些自定义 CSS。

这是一种方法。您的问题留下了一些未解决的问题，例如在溢出情况下应该发生什么。

.row > div {
    overflow-y: scroll;
    height: 100%;
}
.row.one-third {
    height: 33.333%;
}
.row.two-thirds {
    height: 66.667%;
}

Demo

Here it is 再次使用 50% 高度。

Bootstrap 布局全屏 2 行

Bootstrap Layout Full Screen 2 Rows

twitter-bootstrap-3