Question

我是Bootstrap的新手，我正在努力做到这一点：一个div，有三个图像居中（图像显示：内联块属性）。

但是当我开始调整大小时，在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; }

有什么建议吗？

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>

Answer 2

我宁愿选择width:100%代替class="img-responsive"

使用Bootstrap在div中响应图像内嵌块

2 个答案: