Html Bootstrap 响应式图像网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39320966/
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 Responsive Image Grid
提问by nanokozmos
I want to create a responsive image grid with Bootstrap. I have 4 images and I need 1x4 grid for desktop size and 2x2 grid for mobile size. I tried the following code, but there are unnecessary blanks between images for desktop size. Also there isn't any space for mobile size. How can I adjust this layout?
我想用 Bootstrap 创建一个响应式图像网格。我有 4 张图像，桌面尺寸需要 1x4 网格，移动尺寸需要 2x2 网格。我尝试了以下代码，但桌面大小的图像之间存在不必要的空白。也没有任何移动尺寸的空间。如何调整此布局？
Thanks in advance
提前致谢
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
</div>
</div>
</div>
回答by NickyTheWrench
The columns in bootstrap have padding on them.
I would add a class to your <div class="row">and remove the padding to the columns via css.
bootstrap 中的列有填充。我会向您添加一个类，<div class="row">并通过 css 删除列的填充。
Like this:
像这样：
<div class="container">
<div class="row imagetiles">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
</div>
</div>
</div>
<style>
div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
padding: 0px;
}
</style>
That takes care of the space on desktop. You can adjust this space between the images by adjusting the padding on the columns via CSS. For mobile devices - just use media queries. Bootstrap has the following queries:
这会照顾桌面上的空间。您可以通过 CSS 调整列上的填充来调整图像之间的空间。对于移动设备 - 只需使用媒体查询。Bootstrap 有以下查询：
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
}
Example:
例子：
@media(max-width: 480px){
div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
padding: 5px;}
}
