使用Bootstrap在div中内联块显示响应式图片

Question

我刚接触Bootstrap，试图实现以下响应式效果：一个div中心放置了3张图片（这些图片具有display:inline-block属性）。

但当我开始缩小屏幕，在sm设备中，第三张图片会跳到新的一行。我希望在这种情况下，这三张图片都能够自适应，但似乎有些问题。以下是我的HTML代码：

<div class="row">
    <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center">
            <img src="img/img1.jpg" class="img-responsive inline-block" alt="Responsive image"/>
            <img src="img/img2.jpg" class="img-responsive inline-block" alt="Responsive image"/>
            <img src="img/img3.jpg" class="img-responsive inline-block" alt="Responsive image"/>
    </div>
</div>

CSS：

.inline-block{ display: inline-block; }
.center{ text-align: center; }

有什么建议吗？

- javifm

Answer 1

在响应式图片的情况下，图片需要一个单独的容器来调整大小。在你的例子中，有三个图片在同一个容器中，所以它们不能适应这个单一的容器。你可以尝试像这样做：

.row li {
  width: 33.3%;
  float: left;
}

img {
  border: 0 none;
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

<div class="row">
  <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center">
    <ul>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
    </ul>
  </div>
</div>

- David Randall

Answer 2

我更喜欢使用width:100%而不是class="img-responsive"

- Andrew Liu

---

@Tom，width:100% 比 max-width:100% 更容易控制。另外还有这个问题 https://github.com/twbs/bootstrap/issues/10690。 - Andrew Liu