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

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

Bootstrap Grid Column Height 100%

csstwitter-bootstrapheight

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

见这里: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 吗?