我想用 Bootstrap 创建响应式图像网格。我有 4 张图片,桌面尺寸需要 1x4 网格,移动尺寸需要 2x2 网格。我尝试了以下代码,但桌面尺寸的图像之间存在不必要的空白。也没有任何移动尺寸的空间。如何调整此布局?
提前致谢
<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>
最佳答案
bootstrap 中的列有填充。
我会为你的 <div class="row">
添加一个类并通过 css 删除列的填充。
像这样:
<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>
这会占用桌面空间。 您可以通过 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) {
}
例子:
@media(max-width: 480px){
div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
padding: 5px;}
}
关于html - Bootstrap 响应式图像网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39320966/