如何在引导程序中将一列堆叠在其他两列之上？

Question

我对 Bootstrap 完全陌生（就像今天刚开始使用它一样）。我正在改造我的网站，使其与其他屏幕尺寸和设备兼容。我今天熟悉了网格系统。我基本上想要我的网站上的 3 列 - 一个用于文本，一个用于图像，一个用于我的嵌入式 Twitter 页面。所有这些都在某个点堆叠。当所有这些都堆叠起来时，我希望 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");
    }

});

我最小化我的页面并意识到在第一个断点之后还有空间。这是页面在第一个断点后的样子： 在右侧，有足够的空间放置它。我尝试将我的 2 个列的 class col-lg-4 更改为 col-sm-4 以便稍后将它们堆叠起来。这就是我得到的。我的图像被压扁，推特没有占用它可用的空间。我怎样才能让这个看起来不错？ Here 是带有整个代码的 jsbin。我正在使用引导程序 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;
}

并确保图像的静态宽度和边框半径已被删除。包装器应将图像框起来，大小都相同。