引导网格填充页面宽度和高度答案

【问题标题】：bootstrap grid to fill page width and height引导网格填充页面宽度和高度
【发布时间】：2016-02-14 23:15:12
【问题描述】：

我有以下 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 正方形的方式显示，并且网格占据页面的整个宽度和高度。我还希望它具有响应性，并且我不希望每个正方形之间有任何空格。

我尝试在我的部分标签上设置 css，如下所示：

section
{
  height: 100vh;
}

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

谢谢

【问题讨论】：

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案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%;
}

【讨论】：

【解决方案2】：

我认为您正在寻找这样的东西？ https://jsfiddle.net/01djtnyd/

注意：我将所有类都更改为“-6”，以便您可以轻松地看到它在小提琴中工作

将 no-padding 类添加到包装 img div 的 div 中

在css中添加：

.no-padding {
  padding: 0 !important;
  margin: 0;
}

.no-padding > div {
  background-repeat: no-repeat;
  background-size: cover;
  height: 50vh;
}

【讨论】：

【解决方案3】：

您可以使用 css flexbox 和 jQuery 来做到这一点。这里有两个选项可以保持每个 div 的 square 形状。

选项 1：

HTML：

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

CSS：

section
{
  height: 100vh;
}
.grid-wrapper{
  display: flex;
  flex-direction: row;
}
.grid-block{
  margin: 0;
  padding: 0;
  background-color: #e2e2e2;
  border: 1px solid #000;
}

jquery：

$(document).ready(function(){
    var grid_w = $(".grid-block").width();
  $(".grid-block").height(grid_w);
});

小提琴：https://jsfiddle.net/puxLmy1y/2/

选项 2（不带 jQuery）：

HTML：同上

CSS：

section
{
  height: 100vh;
}
.grid-wrapper{
  display: flex;
  flex-direction: row;
}
.grid-block{
  width: 50vh;
  height: 50vh;
  margin: 0;
  padding: 0;
  background-color: #e2e2e2;
  border: 1px solid #000;
}

小提琴：https://jsfiddle.net/puxLmy1y/3/

【讨论】：