Bootstrap响应式图像网格

Question

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

Answer 1

自举列有他们的填充。 我会添加一个类到您的<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

这需要在桌面上照顾的空间。 您可以通过CSS调整列上的填充来调整图像之间的空间。对于移动设备 - 只需使用媒体查询。自举具有以下查询：

/* 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;} 
}