引导：列之间的固定空间？

Question

我需要做出响应的图片网格。我正在使用Bootstrap Grid，但我希望在图片之间始终具有相同的垂直空间。

<div class="container-project-show"> 
 
    <div class="row"> 
 
    <% @pictures.each do |picture| %> 
 
     <div class="col-xs-12 col-sm-6 col-lg-4"> 
 
     <%= cl_image_tag picture.path %> 
 
     </div> 
 
    <% end %> 
 
    </div> 
 
</div>

Answer 1

是否有可能将保证金添加到图像中网格：

.container-project-show img {margin: 10px auto;} 

另一种方法是添加控制间距每个图像周围毒刃格：

.pad-10 {margin: 10px auto;}

<div class="container-project-show"> 
 
    <div class="row"> 
 
    <% @pictures.each do |picture| %> 
 
     <div class="col-xs-12 col-sm-6 col-lg-4"> 
 
     <div class="pad-10"> 
 
     <%= cl_image_tag picture.path %> 
 
      </div> 
 
     </div> 
 
    <% end %> 
 
    </div> 
 
</div>

Answer 2

做到这一点，最好的办法是不直接修改引导。主要原因是当你更新bootstrap时，所有的更改都将被删除。因此，不要打开引导程序创建（或修改）CSS文件。而不是把

<div class="container-project-show"> 
    <div class="row"> 
    <% @pictures.each do |picture| %> 
     <div class="col-xs-12 col-sm-6 col-lg-4"> 
     <%= cl_image_tag picture.path %> 
     </div> 
    <% end %> 
    </div> 
</div> 

做：

<div class="container-project-show"> 
    <div class="row"> 
    <% @pictures.each do |picture| %> 
     <div class="my-col-xs-12 my-col-sm-6 my-col-lg-4"> 
     <%= cl_image_tag picture.path %> 
     </div> 
    <% end %> 
    </div> 
</div> 

然后在新的CSS文件中添加新的类。