列中的引导图像重叠答案

【问题标题】：Bootstrap images in columns overlapping列中的引导图像重叠
【发布时间】：2019-05-19 12:37:30
【问题描述】：

我一直在尝试使用引导列让 3 个图像响应。它们似乎反应灵敏，但问题是图像重叠，除了最后一列仍然正常。

<div class="row">
      <div class="col-sm-2 offset-sm-3">
            <img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
        </div>
        <div class="col-sm-2">
            <img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
        </div>
        <div class="col-sm-2">
          <img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
        </div>
  </div>

我希望所有 3 列都喜欢右边的那一列。

我尝试添加类“img-responsive”和“img-fluid”，但都没有奏效。

我正在使用引导程序 4.0。

【问题讨论】：

鉴于您的上述代码，不应有任何重叠；你应该有三张col-2 图像均匀分布，两边的边距均匀col-3。您能否确保您提供了问题的minimal, complete, and verifiable example？
为什么要偏移第一列？这将改变它与其他两个列的交互方式。
偏移，因为我希望 3 张图像在页面上居中
@NathanielFlick 即使我删除了偏移量，它仍然会做同样的事情

标签： html bootstrap-4 responsive

【解决方案1】：

图像溢出它们的容器。右边的图像是全高的，但它溢出了它的容器。使用引导程序“.col-2”意味着您正在根据窗口宽度限制列宽。您可以使用 background css 规则而不是 img 元素来确保包含或覆盖图像，或者您可以只使用 .col-auto 而不是 .col-2 和 .justify-content-center，前提是您有适当大小的图像。

三个例子都在sn-p中。

.row {
 min-height: 150px;
 }

.col-auto {
  background-color: green;
}

.col-sm-2 {
  background-color: red;
}

.bg-image {
  width: 100%;
  height: 100%;
  background-image: url("https://picsum.photos/100");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.bg-image.bg-image--cover {
  background-size: cover;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row justify-content-center">
  <div class="col-auto">
    <img class="img-fluid" src="https://picsum.photos/100">
  </div>
  <div class="col-auto">
    <img class="img-fluid" src="https://picsum.photos/100">
  </div>
  <div class="col-auto">
    <img class="img-fluid" src="https://picsum.photos/100">
  </div>
</div>

<div class="row">
  <div class="col-sm-2 offset-sm-3">
    <div class="bg-image"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image"></div>
  </div>
</div>

<div class="row">
  <div class="col-sm-2 offset-sm-3">
    <div class="bg-image bg-image--cover"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image bg-image--cover"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image bg-image--cover"></div>
  </div>
</div>

【讨论】：