CSS 带有 Bootstrap 的 div 中的响应式图像内联块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19448316/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive images inline-block in a div with Bootstrap
提问by puro_nervio
I am new in Bootstrap, I am trying to do this responsive: A div, with 3 images centered (images have display: inline-block propertie).
我是 Bootstrap 的新手，我正在尝试做这个响应式：一个 div，以 3 个图像居中（图像具有显示：inline-block 属性）。
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:
但是当我开始调整大小时，在 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:
CSS：
.inline-block{ display: inline-block; }
.center{ text-align: center; }
Any suggestion please?
请问有什么建议吗？
回答by David Randall
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>回答by Andrew Liu
I would rather go for width:100%instead of class="img-responsive"
我宁愿去width:100%而不是class="img-responsive"
