Html bootstrap 3.0 响应式 5 个图像排成一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23964193/
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
bootstrap 3.0 responsive 5 images in one row
提问by user3150060
I am having a problem with bootstrap 3.0 making 5 images in one Row and make those responsive ? The grid system is based of 12 , so how to make 5 images and they look centered without any spaces ?
我在 Bootstrap 3.0 中在一行中制作 5 个图像并使其具有响应性时遇到问题？网格系统基于 12，那么如何制作 5 个图像并且它们看起来居中且没有任何空格？
Also is there away I can make when viewed on tablets or smartphones <480 px to be 2 images per raw? right now it shows 5 images under each other??
在平板电脑或智能手机上观看 <480 px 时，我可以制作每个原始图像 2 张图像吗？现在它显示了 5 个图像在彼此之下？？
here is my code:
这是我的代码：
<div class="row">
<div class="col-md-2">
<img class="img-responsive" src="/images/img1.jpg" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="/images/img2.jpg" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="/images/img3.jpg" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="/images/img4.jpg" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="/images/img4.jpg" />
</div>
</div>
As you can see I am using col-md-2 Along with img-responsive? but its not working really because its not centered
如您所见，我使用 col-md-2 和 img-responsive？但它真的不起作用，因为它没有居中
回答by Steve Sanders
You could have an empty column on either side:
您可以在任一侧都有一个空列：
<div class="row">
<div class="col-md-2 col-md-offset-1">
<img class="img-responsive" src="/images/img1.jpg" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="/images/img2.jpg" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="/images/img3.jpg" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="/images/img4.jpg" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="/images/img4.jpg" />
</div>
</div>
回答by jme11
To answer your other question:
回答你的另一个问题：
Also is there away I can make when viewed on tablets or smartphones <480 px to be 2 images per raw? right now it shows 5 images under each other??
在平板电脑或智能手机上观看 <480 px 时，我可以制作每个原始图像 2 张图像吗？现在它显示了 5 个图像在彼此之下？？
The answer is yes. Out of the box, using col-xs-6 in addition, you'd get 2 images per row for all viewports less than 768px.
答案是肯定的。开箱即用，另外使用 col-xs-6 ，对于小于768px 的所有视口，您将获得每行 2 个图像。
<div class="row">
<div class="col-xs-6 col-md-2 col-md-offset-1">
<img class="img-responsive" src="/images/img1.jpg" />
</div>
<div class="col-xs-6 col-md-2">
<img class="img-responsive" src="/images/img2.jpg" />
</div>
<div class="col-xs-6 col-md-2">
<img class="img-responsive" src="/images/img3.jpg" />
</div>
<div class="col-xs-6 col-md-2">
<img class="img-responsive" src="/images/img4.jpg" />
</div>
<div class="col-xs-6 col-md-2">
<img class="img-responsive" src="/images/img4.jpg" />
</div>
</div>
If you wanted to customize Bootstrap via LESS, SASS or using the customizer here: http://getbootstrap.com/customize/, you could certainly adapt both the grid columns and the breakpoints. What I mean by this, is that you can make a 10 column grid or a 5 column grid and if you prefer to have your xs breakpoint at 480px, you can do that too.
如果您想通过 LESS、SASS 或使用此处的自定义程序自定义 Bootstrap：http: //getbootstrap.com/customize/，您当然可以同时调整网格列和断点。我的意思是，您可以制作 10 列网格或 5 列网格，如果您希望将 xs 断点设置为 480px，您也可以这样做。
To do that you'd need to edit the grid system values: http://getbootstrap.com/customize/#grid-systemand the http://getbootstrap.com/customize/#media-queries-breakpoints
为此，您需要编辑网格系统值：http: //getbootstrap.com/customize/#grid-system和http://getbootstrap.com/customize/#media-queries-breakpoints
It's still Bootstrap with all its goodness, it's just a custom version for your requirements.
它仍然是具有所有优点的 Bootstrap，它只是满足您要求的自定义版本。
回答by Shawn Taylor
You need to create a column class (I called it col-sm-5cols, but call it whatever you like), with styling just like Bootstrap's existing columns, and then give it 20% width when at the right size, via media query.
您需要创建一个列类（我称之为col-sm-5cols，但您可以随意称呼它），其样式与 Bootstrap 的现有列一样，然后在大小合适时通过媒体查询为其提供 20% 的宽度。
.col-sm-5cols{
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
@media (min-width: 768px) {
.col-sm-5cols {
width: 20%;
float: left;
}
}
Example: http://www.bootply.com/YpKhYwVqfD
示例：http: //www.bootply.com/YpKhYwVqfD
And to get your 2 column setup on mobile, you can use col-sm-6to get close, or again customize a smaller columns with media query at 480px and width:50%
并且要在移动设备上设置 2 列，您可以使用col-sm-6来关闭或再次使用 480 像素的媒体查询自定义较小的列和width:50%
