如何使引导图像网格响应

Question

我正在尝试创建图像网格。它在我的屏幕上看起来不错，但我无法让它响应。当它超过 1000 像素宽度时，它开始连续拉伸。

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

任何人都可以帮助我开始使我的图像网格响应。已经尝试让显示表格单元格并向左浮动但没有用。这是我的代码：

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

不要使用 d-flex 类使用 row row-cols-1 row-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 2

试试这样的

我添加了媒体查询，使用了 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 3

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