So legen Sie den Zeilenabstand im Bootstrap fest

Zum Beispiel muss der folgende HTML-Code, der auf dem Bootstrap-Framework-Layout basiert, einen Abstand (Auffüllung oder Rand) zwischen den einzelnen Zeilen hinzufügen. Welche Methoden können erreicht werden?

<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>

Verwandte Empfehlungen: „Bootstrap Erste Schritte Tutorial“

Option 1

Fügen Sie eine neue Stilklasse hinzu und definieren Sie den Rand -top-Stil, wie zum Beispiel:

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

Fügen Sie dann die Stilklasse zum div-Element hinzu, in dem sich die Zeile befindet, wie zum Beispiel:

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

Option 2

Definieren Sie einige allgemeine Stilklassen für den oberen Rand, wie zum Beispiel:

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

Fügen Sie dann eine geeignete CSS-Stilklasse für das div-Element hinzu, in dem sich die Zeile befindet, wie zum Beispiel:

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

Option 3

In Bootstrap 4 können Sie die integrierte Abstandsstilklasse verwenden (siehe hier für Details), wie zum Beispiel:

<div class="row mt-3"></div>

Das obige ist der detaillierte Inhalt vonSo legen Sie den Zeilenabstand im Bootstrap fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!