如何使 Bootstrap 图像网格响应

Question

我正在尝试创建图像网格。它在我的屏幕上看起来不错，但我做不到 responsive.When 它超过了 1000 像素的宽度，它开始伸展成一行。

当设备宽度变小时，我试图垂直推动每个 img div。

任何人都可以帮助我开始使我的图像网格响应。已经尝试显示 table-cell 并向左浮动，但没有成功。这是我的代码：

HTML

<div class="container">
  <div class="d-flex">

    <div class="img-wrapper-20">
      <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
      <p class="galp">Some Text</p>
    </div>

    <div class="img-wrapper-20">
       <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
       <p class="galp">Some Text</p>
    </div>

    <div class="img-wrapper-20">
       <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
       <p class="galp">Some Text</p>
    </div>

    <div class="img-wrapper-20">
       <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
       <p class="galp">Some Text</p>
    </div>

        <div class="img-wrapper-20">
       <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
       <p class="galp">Some Text</p>
    </div>
  </div>
</div>

CSS

.container {
  padding: 5rem 0rem;
}

.img-wrapper-20 {
  width: 20%;
  margin: 0rem 1.5rem 0rem 0rem;
}

.img-wrapper-20 img:hover {
  transform: scale(1.08);
}

.galp {
  margin-top: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: black;
}

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

}

Answer 1

尝试这样的事情

我添加了媒体查询，使用了 flexbox 并更改了图像的最大宽度和高度

HTML

`

        <div class="img-wrapper-20">
            <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png"  class="img-fluid img-thumbnail shadow img-dimension" alt="Sheep 11">
            <p class="galp">Some Text</p>
        </div>

        <div class="img-wrapper-20">
            <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png"  class="img-fluid img-thumbnail shadow img-dimension" alt="Sheep 11">
            <p class="galp">Some Text</p>
        </div>

        <div class="img-wrapper-20">
            <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png"  class="img-fluid img-thumbnail shadow img-dimension" alt="Sheep 11">
            <p class="galp">Some Text</p>
        </div>

        <div class="img-wrapper-20">
            <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png"  class="img-fluid img-thumbnail shadow img-dimension" alt="Sheep 11">
            <p class="galp">Some Text</p>
        </div>

        <div class="img-wrapper-20">
            <img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png"  class="img-fluid img-thumbnail shadow img-dimension" alt="Sheep 11">
            <p class="galp">Some Text</p>
        </div>
    </div>
</div>`

CSS:

.container {
    padding: 5rem 0rem;
}

.img-wrapper-20 {
    max-width: 20%;
    margin: 0rem 1.5rem 0rem 0rem;
}
.img-wrapper-20 img:hover {
        transform: scale(1.08);
    }

.galp {
    margin-top: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: black;
}

.img-dimension {
    max-width:100%;
}

@media screen and (max-width: 1000px) {
    .d-flex {
        display:flex;
        flex-direction: column;
        overflow: auto;
    }
    .img-wrapper-20 {
        max-width: 80%;
        margin: 0rem 1.5rem 0rem 0rem;
    }
}

@media screen and (min-width: 1000px) {
    .d-flex {
        display: flex;
        flex-direction: row;
        overflow: auto;
    }

}

Answer 2

而不是使用d-flexclass使用行row-cols-1row-cols-sm- 2 row-cols-md-4 或者你可以参考这个 https://getbootstrap.com/docs/4.5/layout/grid/#row-columns 为了让事情变得简单，你可以使用卡片网格 https://getbootstrap.com/docs/4.5/components/card/#grid-cards 它会自动处理布局的响应，你可以相应地进行调整。

Answer 3

我建议查看 CSS Tricks 以获得有关 FlexBox 的任何帮助！它提供了有关如何使用 FlexBox 的完整指南。

如何使 Bootstrap 图像网格响应

How To Make Bootstrap Image Grid Responsive

html

css

grid

bootstrap-4

responsive