html - 在 bootstrap 中调整大小后图像保持在同一行？

Question

我在面板正文中添加了 11 张图像，并使它们与 CSS 保持一致: .img-responsive{display: inline-block;} 到目前为止，一切都很好。在我调整页面大小后，他们会一个接一个地移动，这不是我的目标。我希望他们在页面变大后留在同一行。 这可能与图像大小有关。

如果有人能告诉我如何调整图像大小以保持在同一行，即使在调整大小后也是如此!

代码如下:

.img-responsive {
  display: inline-block;
}

<div class="col-xs-8 col-sm-6 col-lg-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">My images</h3>
    </div>
    <div class="panel-body">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
    </div>
  </div>
</div>

Answer 1

默认情况下，所有 img-responsive 都会执行以下操作:

display: block;
max-width: 100%;
height: auto;

这可以确保图像永远不会比它的父图像更宽，并且比例保持不变。

为了确保所有图像都在一行中，您添加了行内 block ，但这只会让图像出现在同一行上，并且不会限制它们的大小。为确保所有 11 张图片都在同一行，您必须执行以下操作:

max-width: calc(100%/11);

这确保每张图片的最大宽度为其父图片宽度的 1/11。

另一件需要考虑的事情是，对于行内元素，空格是相关的。 11 个图像 + 空格将超过父级的 100%，因此您必须确保 html 中的 img 标签之间没有空格。

看看我设置的演示:http://www.bootply.com/46tTVHAtYG