jquery - 如何在 Bootstrap 中将一列堆叠在其他两列之上？

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 个列的类 col-lg-4 更改为 col-sm-4，以便稍后堆叠它们。这就是我得到的。 我的图片被压扁了，推特也没有占用它的可用空间。我怎样才能使它看起来不错？ Here是包含整个代码的 jsbin。我正在使用 Bootstrap 4。

Answer 1

从提供的 jsbin 来看，问题似乎只是中间行的图像具有明确的 width 属性，因此它们无法填充从推特行。这是允许它们根据需要拉伸(stretch)的样式(这也应该适用于更大的屏幕尺寸):

.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;
  }
}

关于您关于类似大小图像的问题，这是我会使用的一种解决方案。将每个图像包装在一个公共(public)容器类中:

<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;
}

并确保删除图像的静态宽度和边框半径。包装器应以相同的尺寸框住图像。