Bootstrap 3 way of laying out 8 images in a row

问题

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.

回答1:

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>

来源：https://stackoverflow.com/questions/34100988/bootstrap-3-way-of-laying-out-8-images-in-a-row

标签

twitter-bootstrap

responsive-images