twitter-bootstrap - Bootstrap 3列にギャップがない場合の対処方法は?

Question

新しい Bootstrap 3 グリッドシステムで困っています。4 列のグリッドを作成したいと思います。だからここに私のコードがあります：

<div class="row">
   <div class="col-lg-4">...</div>
   <div class="col-lg-4">...</div>
   <div class="col-lg-4">...</div>
</div>

私の問題は、列の間に隙間がないことです。Grid は、margin-left と margin-right の代わりに、padding-left と padding-right を列に適用します。

パディングを削除してマージンを追加すると、折りたたまれます。どうすればこれを修正できますか？または私が理解できなかった何かがありますか？

score 11 · Accepted Answer

デフォルトのパディングを使用してギャップを作成できない場合は、適切な列に「margin-left」を追加し、% 幅も微調整する必要があります。

たとえば、.col-lg-4通常は 33% の幅があるので、少し減らします..

.col-lg-4 {
    margin-left:15px;
    width:31.6%;
}

もう 1 つのオプションは、列内でコンテナーを使用することです。これにより、パディングが機能してギャップが作成されます。

score 5 · Accepted Answer

.col-lg-4 {
    margin-left:15px;
    width:31.6%; /* non-css3 fallback */
    width: calc( 33.33333333% - 15px ); /* css3 calculation */
}

4 に答える 4