Bootstrap 8张图片连续排版的3种方式

Question

我有八张 640x480 图片。它可能会波动一两个，我希望它们均匀分布并居中排列。

IIUC an iPhone 6 的屏幕为 1334x750。所以我希望至少有两张 640x480 的图像连续出现。然而，由于屏幕有 "high pixel density"，也许更多？

我的笔记本电脑的分辨率为 1080p，也就是 1920 像素，所以我希望至少三张图片能清楚地显示在一行中。

对于不适合一行的图像，我希望它们在下一行或者稍微调整以适合。

我开始写一个 JSBIN 但我不知道如何标记 Bootstrap 正如我上面想要的那样。

Answer 1

就我个人而言，在这种特定情况下，我可能会使用 flexbox...

注意：记得测试它是否符合您的浏览器要求：http://caniuse.com/#feat=flexbox

是的，下面的 CSS 可以真正简化 - 我只是通过 http://the-echoplex.net/flexyboxes/

快速生成的

您仍然可以将图像放在 .col-* div 中以更准确地控制某些设备上的大小 - 但如果您的目标是 640x480，则不需要。

.img-fill {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-align-content: space-around;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.img-fill .img-responsive {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
html,
body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

<div class="img-fill">
  <img class="img-responsive" src="http://i.imgur.com/ocV1u5R.jpg">
  <img class="img-responsive" src="http://i.imgur.com/zpoJ1aL.jpg">
  <img class="img-responsive" src="http://i.imgur.com/ocV1u5R.jpg">
  <img class="img-responsive" src="http://i.imgur.com/zpoJ1aL.jpg">
  <img class="img-responsive" src="http://i.imgur.com/ocV1u5R.jpg">
  <img class="img-responsive" src="http://i.imgur.com/zpoJ1aL.jpg">
  <img class="img-responsive" src="http://i.imgur.com/ocV1u5R.jpg">
  <img class="img-responsive" src="http://i.imgur.com/zpoJ1aL.jpg">
</div>

Bootstrap 8张图片连续排版的3种方式

Bootstrap 3 way of laying out 8 images in a row

twitter-bootstrap

responsive-images