ブートストラップ列の垂直方向の間隔の積み重ねの問題を解決する方法-CSSチュートリアル-php.cn

ブートストラップ列の垂直方向の間隔の積み重ねの問題を解決する方法

不言

リリース： 2018-11-06 13:46:55

オリジナル

3529 人が閲覧しました

この記事では、Bootstrap 列の垂直方向の間隔の積み重ねの問題の解決策を紹介します。必要な友人は参照してください。

発生した問題

Twitter Bootstrap を使用しているときに、ブートストラップの列が積み重なり始めたときに、垂直方向の間隔の問題が発生しました。たとえば、中サイズの画面の 3 列レイアウトを見てみましょう。 (推奨チュートリアル: Bootstrap チュートリアル )

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

ログイン後にコピー

このレイアウトをタブレットまたは携帯電話で表示すると、すべての列が積み重ねられますが、各列が前の列に直接接触する場合があります。

簡単な解決策は、各列に下マージンを追加することです。

[class*="col-"] {
    margin-bottom: 15px;
}

ログイン後にコピー

これは場合によっては機能しますが、必要のない場合には余分な不要なマージンが追加されます。

解決策

この問題を解決するには、積み重ねたときに列の上マージンを適用する新しい CSS クラスを作成できます。

.row.row-grid [class*="col-"] + [class*="col-"] {
    margin-top: 15px;}
    @media (min-width: 1200px) {
    .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
        margin-top: 0;
    }
    }
    @media (min-width: 992px) {
    .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 0;
    }
    }
    @media (min-width: 768px) {
    .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
        margin-top: 0;
    }
    }

ログイン後にコピー

row-gridクラスは前の列と同じ列に上マージンを適用し、メディアクエリは不要な場合は上マージンを削除します。

関連して、行間に垂直方向のスペースを追加したい場合は、次の行を CSS に追加します。

.row-grid + .row-grid {
    margin-top: 15px;
    }

ログイン後にコピー

Usage

を追加するだけです。垂直方向の列間隔を有効にする行に row-grid クラスを追加します。

rreeee

以上がブートストラップ列の垂直方向の間隔の積み重ねの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。