html - Bootstrap 网格填充页面宽度和高度

Question

我有以下 4 个正方形(两行两列):

<section id="gallery">
  <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                    
                 <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                 </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                    
                <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                    
                <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                    
                <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                </div>
            </div>
        </div>
    </div>
</section>

我希望它们以 4 个方形的方式显示，并且网格占据页面的整个宽度和高度。我还希望它能够响应并且我不希望每个方 block 之间有任何空格。

我试过像这样在我的部分标签上设置 css:

section
{
  height: 100vh;
}

但是那没有效果。请问有人知道如何实现吗？

谢谢

Answer 1

试试这个作为 CSS

section#gallery
{
    height:100%;
    width:100%;
}

div.row
{
    height:50%;
}

div.col-lg-6.col-md-6.col-sm-6.col-xs-12
{
    width:50%;
}