Bootstrap 3连续布局8个图像的方式(Bootstrap 3 way of laying out 8 images in a row)

Bootstrap 3连续布局8个图像的方式(Bootstrap 3 way of laying out 8 images in a row)

我有八个640x480图像。 它可能会波动一两个，我希望它们均匀分布并以一行为中心。

IIUC和iPhone 6的屏幕为1334x750。 所以我希望连续至少有两个640x480的图像。 然而，由于屏幕具有“高像素密度”，可能更多？

我的笔记本电脑的分辨率为1080p，即1920像素，所以我希望在行上能清晰显示至少三张图像。

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

我开始写一个JSBIN，但我很困惑如何按照我的要求标记Bootstrap。

I have eight 640x480 images. It might fluctuate one or two, and I want them evenly distributed & centered on a row.

IIUC an iPhone 6 has a screen of 1334x750. So I expect at least two 640x480 images on a row. However since the screen has a "high pixel density", maybe more?

My laptop has a resolution of 1080p aka 1920 pixels across, so I expect at least three images to be clearly shown on the row.

For images that don't fit on row, I expect them on the next row or maybe slightly tweaked to fit.

I'm begun writing a JSBIN but I am puzzled how to mark up Bootstrap as I want above.

最满意答案

就个人而言，我可能会使用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> 
  
 
Personally in this specific case I would probably use flexbox...
 
Note: Remember to test it meets your browser requirements: http://caniuse.com/#feat=flexbox
 
Yes the following CSS can be really simplified - I just generated this quickly via http://the-echoplex.net/flexyboxes/
 
You can still put the images in .col-* div's to more accurately control the size on some devices - but it's not needed if 640x480 is your target.
 
 
 
  
  
.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>