我有一个有按钮的页面。单击该按钮时，我希望页面向下滚动到另一个页面，其中包含4个正方形（两行和两列），类似于this page后单击资源管理器。我尝试使用类似这样的东西做4平方的引导程序：
<section id="my_section">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-6">Top left image</div>
<div class="col-lg-6 col-sm-6">Top right image</div>
</div><!-- End of first row -->
<div class="row">
<div class="col-lg-6 col-sm-6">Bottom left image</div>
<div class="col-lg-6 col-sm-6">Bottom right image</div>
</div><!-- End of second row -->
</div><!-- End of container -->
</section>
但由于某种原因，我的4张图片没有正确地获取视口的整个内容（换句话说，底部的两个图像没有完全显示，我必须向下滚动才能看到其余的内容）
如何使我的四张图像完全显示在我的浏览器的视口中？
提前致谢
答案 0 :(得分：3)
布局本身很容易获得。这里的问题是您希望图像在不同的屏幕尺寸和布局上如何？你想要他们裁剪......
#my_section .row>[class^=col-] {
height: 50vh;
}
#my_section .row>[class^=col-] {
background: transparent center center no-repeat;
background-size: cover;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<section id="my_section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x2:1/f00/fff)"></div>
<div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x2:3/444/999)"></div>
</div><!-- End of first row -->
<div class="row">
<div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x1:1/ccc/f00)"></div>
<div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x1:2/999/369)"></div>
</div><!-- End of second row -->
</div><!-- End of container -->
</section>
......还是包含？
#my_section .row>[class^=col-] {
height: 50vh;
}
#my_section .row>[class^=col-] {
background: transparent center center no-repeat;
background-size: contain;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<section id="my_section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x2:1/f00/fff)"></div>
<div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x2:3/444/999)"></div>
</div><!-- End of first row -->
<div class="row">
<div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x1:1/ccc/f00)"></div>
<div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x1:2/999/369)"></div>
</div><!-- End of second row -->
</div><!-- End of container -->
</section>
如果您希望将它们并排放在所有屏幕尺寸上，则需要将col-sm-6替换为col-xs-6 s：
#my_section .row>[class^=col-] {
height: 50vh;
}
#my_section .row>[class^=col-] {
background: transparent center center no-repeat;
background-size: cover;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<section id="my_section">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6" style="background-image: url(http://dummyimage.com/800x2:1/f00/fff)"></div>
<div class="col-xs-6" style="background-image: url(http://dummyimage.com/800x2:3/444/999)"></div>
</div><!-- End of first row -->
<div class="row">
<div class="col-xs-6" style="background-image: url(http://dummyimage.com/800x1:1/ccc/f00)"></div>
<div class="col-xs-6" style="background-image: url(http://dummyimage.com/800x1:2/999/369)"></div>
</div><!-- End of second row -->
</div><!-- End of container -->
</section>
您链接的网站似乎使用裁剪的响应版本（第一个），只需一点点扭曲，即可实现缩放效果。我也添加了它，只使用CSS和标记的一个小改动：
#my_section .row>[class^=col-] {
height: 50vh;
overflow: hidden;
position: relative;
min-height: 400px;
background-color: #000;
}
#my_section .row>[class^=col-]>div {
background: transparent center center no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0) scale(1.01);
transform: translate3d(-50%, -50%, 0) scale(1.01);
-webkit-transition: opacity .42s cubic-bezier(.55,0,.55,.22), -webkit-transform 2.1s ease-out;
transition: opacity .42s cubic-bezier(.55,0,.55,.22), -webkit-transform 2.1s ease-out;
transition: transform 2.1s ease-out, opacity .42s cubic-bezier(.55,0,.55,.22);
transition: transform 2.1s ease-out, opacity .42s cubic-bezier(.55,0,.55,.22), -webkit-transform 2.1s ease-out;
}
#my_section .row>[class^=col-]>div:hover {
-webkit-transform: translate3d(-50%, -50%, 0) scale(1.21);
transform: translate3d(-50%, -50%, 0) scale(1.21);
opacity: .444;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<section id="my_section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div style="background-image: url(http://dummyimage.com/800x2:1/f00/fff)"></div>
</div>
<div class="col-sm-6">
<div style="background-image: url(http://dummyimage.com/800x2:3/444/999)"></div>
</div>
</div><!-- End of first row -->
<div class="row">
<div class="col-sm-6">
<div style="background-image: url(http://dummyimage.com/800x1:1/ccc/f00)"></div>
</div>
<div class="col-sm-6">
<div style="background-image: url(http://dummyimage.com/800x1:2/999/369)"></div>
</div>
</div><!-- End of second row -->
</div><!-- End of container -->
</section>
作为旁注，此布局中不需要Twitter Bootstrap类。您可以将自己限制为.row并使用
{flex: 0 0 50%;}关于儿童和{flex-wrap: wrap;}上.row。 当然，您需要一些前缀和一些@media查询以获得浏览器支持和响应能力，但仍然可以管理。
不要害怕使用 flexbox 。今天它的全球支持率高于 box-shadow ，但人们不愿意使用它，因为它不是“完全支持”。
从我的角度来看，唯一不会降级并且需要flexbox在旧版浏览器中重现的JavaScript功能是 order 。它本身不是flexbox属性，但通常是相关的。
但我们正在谈论重新排序。没有js之前无法完成。
甚至Bootstrap正在v4中实现flexbox。可选，但可用。