ブートストラップ3グリッドシステムに溝を追加する

Question

私は明らかに何か非常にはっきりしていないが、私はブートストラップの列の間に10pxの隙間が欲しい。デフォルトで溝があるui-kitから来て、それらを無効にするには、単純にuk-grid-collapseクラスを追加します。

シャッターをオンにするブートストラップは何ですか？

http://codepen.io/anon/pen/vKBjBa

<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-12 col1"> 
     <div class="div-content">col 1</div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col2"> 
     <div class="div-content">col 2</div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col3"> 
     <div class="div-content">col 3</div> 
    </div> 
</div> 

Answer 1

内側のdivに色を定義するだけです。ここで私は両親からクラスを削除しており、ブートストラップは非常にそれらを使用して、内側のdivのにbackground-colorを定義col-クラスで、デフォルトのガタースペースを持っているので、子のdivの

<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-12"> 
    <div class="div-content col1">col 1</div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6"> 
    <div class="div-content col2">col 2</div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6"> 
    <div class="div-content col3">col 3</div> 
    </div> 
</div> 

にクラスを渡されました。

デフォルトのガタースペースは、のdivの間30pxのデフォルトのスペースが表示されますので、それぞれの側から15pxを左右にあります。そのスペースを10pxに変更したい場合は、cssに独自のスペースを入れて上書きしてください。

Answer 2

あなたは、ブートストラップクラスcontainer-fluidを使用してそれを行うことができ、次のようにあなたのHTMLを更新してください： -

<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-12"> 
     <div class="container-fluid col1"> 
      <div class="div-content">col 1</div> 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6"> 
     <div class="container-fluid col2"> 
      <div class="div-content">col 2</div> 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6"> 
     <div class="container-fluid col3"> 
      <div class="div-content">col 3</div> 
     </div> 
    </div> 
</div> 

それはあなたを助けるかもしれません。

Answer 3

あなたは10pxののカスタムガター幅が必要な場合は、http://getbootstrap.com/customize/を使用して、値とブートストラップをカスタマイズしたり、