Bootstrap 响应式图像网格

Question

我想用 Bootstrap 创建响应式图像网格。我有 4 张图片，桌面尺寸需要 1x4 网格，移动尺寸需要 2x2 网格。我尝试了以下代码，但桌面尺寸的图像之间存在不必要的空白。也没有 space 移动尺寸。我该如何调整这个布局？

提前致谢

<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>

Answer 1

bootstrap 中的列有填充。我会添加一个 class 到你的 <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>

JsFiddle Demo

这会处理桌面上的 space。您可以通过 CSS 调整列上的填充来调整图像之间的 space。对于移动设备——只需使用媒体查询。 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;}
}

Bootstrap 响应式图像网格

Bootstrap Responsive Image Grid

html

css

responsive-design

twitter-bootstrap

responsive-images