ブートストラップ：列間の固定スペース？

Question

私は絵の反応的なグリッドを作る必要があります。私はブートストラップグリッドを使用していますが、私は常に私の写真の間に同じ垂直スペースを持っています。

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

代替の間隔を制御し、各画像の周りSHIVのdiv要素を追加することです：

.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

これを行うための最善の方法は、ないになり、直接ブートストラップを変更します。主な理由は、ブートストラップを更新するときに、すべての変更が消去されることです。そのため、ブートストラップを開く代わりに、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ファイルに新しいクラスを追加します。