web-dev-qa-db-ja.com

Bootstrap 3列にギャップがない場合の対処方法は？

新しい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>

私の問題は、列の間にギャップがないことです。グリッドは、margin-leftとmargin-rightの代わりに、padding-leftとpadding-rightを列に適用します。

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

twitter-bootstrapgridmultiple-columnstwitter-bootstrap-3
15
Ali Emre Çakmakoğlu

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

例えば ​​.col-lg-4は通常33％の幅があるので、少し減らします。

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

http://bootply.com/74374

別のオプションは、列の内側にコンテナを使用することです。その後、パディングが機能してギャップが作成されます。

11
Zim

より正確な列幅については、 css3 calc（）演算子 を使用できます。

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

その行を。container DIVに含める必要があります。それ以外の場合、Bootstrapは、列間にギャップがあってはならないことを理解しています。

2
Julián Abal

私はこれを投稿しました ここ すでにですが、それでも元の質問に関連しており、このアプローチがどのように機能するかについての詳細を提供します。

列間のスペースについても同様の問題が発生しました。根本的な問題は、bootstrap 3と4の列がマージンの代わりにパディングを使用することです。したがって、2つの隣接する列の背景色が互いに接触します。

私たちの問題に適合し、列の間隔を空けてグリッドシステムの他の部分と同じガター幅を維持しようとするほとんどの人に役立つ可能性が高い解決策を見つけました。

これが私たちが目指していた最終結果でした

enter image description here

列の間にドロップシャドウのあるギャップがあると問題がありました。列の間に余分なスペースは必要ありませんでした。サイトの背景色が2つの白い列の間に表示されるように、側溝を「透明」にしたかっただけです。

これは2つの列のマークアップです

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

このアプローチでは、「row」クラスbootstrapが使用するように、負のマージンを持つ内部divが必要です。このdivは、「raised-block」と呼ばれ、列の直接の兄弟である必要があります。

このようにして、列内に適切なパディングを取得できます。スペースを作成することで機能するように見えるソリューションを見てきましたが、残念ながら、それらが作成する列には行の両側に余分なパディングがあるため、グリッドレイアウトが設計されたように行が細くなります。希望の外観で画像を見ると、これは、2つの列が一緒になって、グリッドの自然な構造を壊す上部の1つの大きな列よりも小さくなることを意味します。

このアプローチの主な欠点は、各列のコンテンツをラップする追加のマークアップが必要になることです。私たちにとってこれは、特定の列だけが目的の外観を実現するためにそれらの間にスペースを必要としたために機能します。

お役に立てれば

1
Joe Fitzgibbons