Question

我有6张图像分成2行，3列（每行有3张图像）显示在大屏幕上。当我变成一个小屏幕时，我希望每一行都能获得1张图像，但我只想显示4张图像，其他图像将被隐藏。我怎么能用css做到这一点？谢谢。

Answer 1

[class*="col-"] {
  margin-bottom: 15px;
}

.images img {
  width: 100% !important;
  height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container images">
  <div class="row">
    <div class="col-sm-12 col-md-4"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="col-sm-12 col-md-4"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="col-sm-12 col-md-4"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="col-sm-12 col-md-4"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="col-sm-12 col-md-4 d-none d-md-block"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="col-sm-12 col-md-4 d-none d-md-block"><img src="https://placeimg.com/640/480/any" alt=""></div>
  </div>
</div>

溢出：隐藏图像

1 个答案: