ブートストラップで行間隔を設定する方法

たとえば、Bootstrap フレームワーク レイアウトに基づく次の HTML コードでは、各行の間にスペース (パディングまたはマージン) を追加する必要があります。

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

関連する推奨事項: 「bootstrap 入門チュートリアル 」

オプション 1

新しいスタイル クラスを追加し、マージンを定義する-top style (例:

.top-buffer { margin-top:20px; }

) 次に、行が配置されている div 要素にスタイル クラスを追加します (例:

<div class="row top-buffer"> ...</div>

Option 2

)

一般的な上マージン スタイル クラスをいくつか定義します (例:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

)。次に、行が配置されている div 要素に適切な CSS スタイル クラスを追加します。例:

<div class="row top7"></div>

オプション 3

Bootstrap 4 では、次のような組み込みの間隔スタイル クラス (詳細についてはここを参照) を使用できます。

以上がブートストラップで行間隔を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。