响应图像inline-block在一个div与Bootstrap [英] Responsive images inline-block in a div with Bootstrap

问题描述

我是在Bootstrap的新的，我试图做这个响应：一个div，有3个图像居中（图像显示：inline-block属性）。

I am new in Bootstrap, I am trying to do this responsive: A div, with 3 images centered (images have display: inline-block propertie).

但是当我开始调整大小时，在sm设备中，第三个图像跳到一个新行。我想在那种情况下，三个图像是响应，但一些东西不工作。我的HTML代码：

But when I start resizing, in sm devices, the third image jump to a new line. I would like that in that case the three images were responsive, but something is not working. My HTML code:

<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; }

有任何建议吗？

推荐答案

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

In the case of responsive images, the image(s) need an individual container that they can be sized into. In the example you have, there are three images in the one container, so they won't adapt individually to that single container. You could try something like:

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

这篇关于响应图像inline-block在一个div与Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！