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

Question

我是Bootstrap的新手,我正在尝试做这个响应:一个div,有3个图像居中(图像显示:内联块属性).

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