twitter-bootstrap Bootstrap 网格列高度 100%
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/29775426/
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
Bootstrap Grid Column Height 100%
提问by mwild
I'm using bootstrap grid system to make some nested grids. The only problem is I cant get the grid to span the whole screen, currently its just 1 line tall.
我正在使用引导网格系统来制作一些嵌套网格。唯一的问题是我无法让网格跨越整个屏幕,目前它只有 1 行高。
Is there any way to make it fill 100% of the parent container? I've tried simple stuff like css height attributes.
有没有办法让它100%填充父容器?我尝试过简单的东西,比如 css 高度属性。
this is my code below
这是我下面的代码
<div class="container">
<div class="row" style="height:100vh">
<div class="col-md-6" style="height:100%">
<div class="row" style="height:50%">
<div class="col-md-6">2</div>
<div class="col-md-6">3</div>
</div>
<div class="row" style="height:50%">
<div class="col-md-6">4</div>
<div class="col-md-6">5</div>
</div>
</div>
<div class="col-md-6" style="height:100%">
1
</div>
</div>
回答by Nazzanuk
You could add height:100%to each .col-md-6.
您可以添加height:100%到每个.col-md-6.
See here: http://codepen.io/Nazzanuk/pen/yNLNBd
回答by Thomas Decaux
Use CSS viewport units:
使用 CSS 视口单位:
http://caniuse.com/#feat=viewport-units
http://caniuse.com/#feat=viewport-units
This is magic!
这是魔法!
回答by Sindre B?yum
For the div to expand fully, div .col-md-6 { height:100%; position:relative; }should work. Can we see your CSS?
为了使 div 完全扩展,div .col-md-6 { height:100%; position:relative; }应该可以工作。我们可以看看你的 CSS 吗?

