twitter-bootstrap 如何在引导网格中设置顶行的高度?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27231017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:56:46  来源:igfitidea点击:

How to set height of top row in bootstrap grid?

twitter-bootstraptwitter-bootstrap-3

提问by brinch

I have a container which I want to split in two horizontal rows using a bootstrap grid.

我有一个容器,我想使用引导网格将其分成两个水平行。

The top row should take up 80% of the height, and the bottom the remaining.

顶行应占高度的 80%,底行应占剩余的高度。

<div class="container-fluid">
    <div class="row" style="height:80%">
        <div class="col-xs-12">This should take up 80% of the height</div>
    </div>

    <div class="row">
        <div class="col-xs-12">This should take up the remaining 20% of the height</div>
    </div>
</div>

I tried to add height:80% as inline style to the first row, but it did not have any effect.

我尝试将 height:80% 作为内联样式添加到第一行,但没有任何效果。

What am I missing here?

我在这里错过了什么?

回答by DRC

set

body, html, .container-fluid {
     height: 100%;
}

an example: http://jsfiddle.net/wqkLodb6/

一个例子:http: //jsfiddle.net/wqkLodb6/