如何在引导程序中将一列叠加在另外两列之上？

Question

我对Bootstrap完全不熟悉（就像刚刚开始使用它一样）。我正在重新设计我的网站，使其与其他屏幕尺寸和设备兼容。我今天熟悉了网格系统。我基本上想在我的网站上有3列 - 一个用于文本，一个用于图像，一个用于我的嵌入式推特页面。所有这些都堆积在某一点上。当所有这些都堆叠在一起时，我希望Twitter消失。我用这个jquery做了：

$(window).resize(function(){

    if(window.innerWidth<992){
        $("#pln").hide();//id for twitter
        $("#label").hide();
    }
    else{
    $("#pln").css("display", "block");
    $("#label").css("display", "initial");
    }

});

我最小化我的页面，并意识到在第一个断点之后有空间。这是页面在第一个断点之后的样子：在右侧，有足够的空间。我尝试将类col-lg-4更改为我的2列的col-sm-4，以便稍后将它们堆叠起来。这就是我得到的。 我的图像被压扁，而推特没有占用它可用的空间。我怎样才能让它看起来很好看？ Here是包含整个代码的jsbin。我正在使用bootstrap 4。

Answer 1

从提供的jsbin看，问题只是中间行中的图像具有明确的width属性，因此它们无法填充剩余的整个空间。 Twitter排。这里的样式将允许它们根据需要拉伸（这也适用于更大的屏幕尺寸）：

.img-fluid {
  width: 94%; /* play around with this value until you get what you want */
  height: auto; /* maintain image aspect ratio */
  margin: 0 auto;
}

顺便说一句，不要使用jQuery进行样式设置（比如隐藏和显示Twitter模块）。相反，查找并使用CSS媒体查询。 CSS用于样式/ jQuery主要用于行为。尽量让它们分开。您可以在浏览器中添加不必要的负载，而CSS几乎不能添加任何负载。这是一个可以完成同样事情的示例查询：

@media (max-width: 992px) {
  #pln {
    display: none;
  }
}

关于您关于类似尺寸图像的问题，这是我将使用的一种解决方案。将每个图像包装在一个公共容器类中：

<div class="image-wrapper">
  <img src="someimage.jpg" />
</div>
<div class="image-wrapper">
  <img src="someimage.jpg" />
</div>
...

并添加以下样式：

.image-wrapper {
  width: 94%;
  height: 0;
  padding-bottom: 62.107142857% /* this is the current aspect ratio of your images */
  overflow: hidden;
  border-radius: 20px;
}

确保删除图像的静态宽度和边框半径。包装器应该对图像进行构图，所有图像的大小都相同。