引導：列之間的固定空間？

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文件中添加新的類。