在 Bootstrap 4 的小屏幕上将水平图像行变成垂直堆叠的线答案

【问题标题】：Making a horizontal image row into a vertically stacked line on smaller screens in Bootstrap 4在 Bootstrap 4 的小屏幕上将水平图像行变成垂直堆叠的线
【发布时间】：2021-04-12 09:12:39
【问题描述】：

我有一排图像在普通的大屏幕上可以很好地显示在屏幕上，但是当我使用较小的显示时，它只会缩小图像并在小屏幕上保持水平。我将如何使它具有响应性，以便在它进入较小的屏幕尺寸时垂直堆叠。

<div class="container">
  <div class="imgRow">
    <div class="d-flex justify-content-around">
      <div class="col-sm-3 w-25">
        <img
          src="image1.jpg"
          class="img-fluid"
          alt="..."
        />
      </div>
      <div class="col-sm-3 w-25">
        <img
          src="image2.jpg"
          class="img-fluid"
          alt="..."
        />
      </div>
      <div class="col-sm-3 w-25">
        <img
          src="image3.jpg"
          class="img-fluid"
          alt="..."
        />
      </div>
    </div>
  </div>
</div>

我对这一行唯一的 CSS 如下：

.container .imgRow {
  padding-bottom: 10%;
}

@media only screen and (max-width: 768px) {

  .imgRow img {
    width: 100;
  }
}

我尝试删除 CSS，取出 image-fluid，将 col- 更改为所有不同的东西，取出容器，取出 justify-content-around。

【问题讨论】：

将flex-wrap: wrap 用于<div class="d-flex justify-content-around">...
我尝试在 CSS 和内联中添加 'flex-wrap: wrap'，但它不起作用。它确实让我尝试了“align-items-start flex-column”，但这只会让我的项目在所有屏幕尺寸下都变成一个水平列。
为什么在媒体查询中指定 100 而没有单位？这里 - .imgRow img { width: 100; }.
那是偶然的，我在发帖之前一直在搞乱它，我忘了放回去，单位是%。

标签： html css bootstrap-4

【解决方案1】：

您可以使用 Bootstrap 的行并告诉您的每一列何时您希望它们都在一行而不是单独的行。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row bg-dark d-flex justify-content-around">
        <div class="col-12 col-md-3 bg-warning">
            <img src="https://via.placeholder.com/200x100.png" class="mx-auto d-block img-fluid" alt="..." />
        </div>
        <div class="col-12 col-md-3 bg-primary">
            <img src="https://via.placeholder.com/200x100.png" class="mx-auto d-block img-fluid" alt="..." />
        </div>
        <div class="col-12 col-md-3 bg-info">
            <img src="https://via.placeholder.com/200x100.png" class="mx-auto d-block img-fluid" alt="..." />
        </div>
    </div>
</div>

【讨论】：