引导布局全屏2行

Question

在bootstrap 3中，如何创建一个填充整个屏幕（100％高度）的布局，包含如下两行（每个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

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

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

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

<强> Demo

再次以50％的高度

Here it is 。

Answer 2

我希望这会有所帮助

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