Bootstrap响应式图像网格

Question

Bootstrap响应式图像网格

htmlcsstwitter-bootstrapresponsive-designresponsive-images

6

我想使用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>

- nanokozmos

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NickyTheWrench · Accepted Answer

Bootstrap 的列有 padding。

我会给你的 <div class="row"> 添加一个 class，并通过 CSS 去除列的 padding。

像这样：

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

这样就解决了桌面端的空间问题。您可以通过调整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;}
}