この問題を解決する簡単な方法があると思うのですが。基本的には、2つのコラムがある場合、どのようにしてそれらの間にスペースを追加することができますか?
例えば、htmlが次のようになっている場合。
<div class="col-md-6"></div>
<div class="col-md-6"></div>
出力は単純に2つのカラムが隣り合ってページの幅いっぱいに表示されます。幅が 1000px
に設定されていたとすると、各 div は 500px
の幅になります。
もし2つの列の間に100px
のスペースが欲しいとしたら、どうやってこれを実現するのでしょうか?もちろん、ブートストラップによって自動的にdivのサイズはそれぞれ450px
になり、スペースを補うことができます。
カラム間の間隔は、ここで説明されている col-md-offset-*
クラスを使って実現できます。間隔は一貫しているので、すべての列が正しく並びます。均等な間隔とカラムの大きさを得るために、私は次のようにします。
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
遅ればせながら、パディングでボックスの間隔を広げてみてはいかがでしょうか。
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSSです。
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
やってみよう