14

我是 Bootstrap 的新手，我正在尝试响应：一个 div，3 个图像居中（图像有显示：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; }

请问有什么建议吗？

4

2 回答 2

16

在响应式图像的情况下，图像需要一个可以调整大小的单独容器。在您的示例中，一个容器中有三个图像，因此它们不会单独适应该单个容器。您可以尝试以下方法：

.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>

于 2013-10-18T12:23:37.047 回答
2

我宁愿去width:100%而不是class="img-responsive"

于 2013-10-18T12:19:52.963 回答