So lösen Sie das Stapelproblem des vertikalen Abstands in Bootstrap-Spalten

Dieser Artikel stellt Ihnen die Lösung für das Stapelproblem des vertikalen Abstands in Bootstrap-Spalten vor. Freunde in Not können sich darauf beziehen.

Aufgetretene Probleme

Bei der Verwendung von Twitter Bootstrap stieß ich auf einige Probleme mit dem vertikalen Abstand, als die Spalten des Bootstrap anfingen, sich zu stapeln. Schauen wir uns zum Beispiel ein 3-Spalten-Layout für einen mittelgroßen Bildschirm an. (Empfohlenes Tutorial: Bootstrap-Tutorial)

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

Wenn dieses Layout auf einem Tablet oder Telefon angezeigt wird, werden alle Spalten gestapelt, aber jede Spalte berührt möglicherweise direkt die vorherige Spalte.

Eine einfache Lösung besteht darin, jeder Spalte einen unteren Rand hinzuzufügen:

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

Dies funktioniert in einigen Fällen, fügt aber zusätzlichen, unnötigen Rand hinzu, wenn er nicht benötigt wird.

Lösung

Um dieses Problem zu lösen, können wir eine neue CSS-Klasse erstellen, die beim Stapeln den oberen Rand auf Spalten anwendet:

.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 Die Klasse wendet den oberen Rand auf die Spalte mit der vorherigen Spalte an, die Medienabfrage entfernt dann den oberen Rand, wenn er nicht benötigt wird.

In diesem Zusammenhang: Wenn Sie einen vertikalen Abstand zwischen Zeilen hinzufügen möchten, fügen Sie diese Zeile zu Ihrem CSS hinzu:

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

Verwendung

Einfach hinzufügen Fügen Sie die row-grid-Klasse den Zeilen hinzu, in denen Sie den vertikalen Spaltenabstand aktivieren möchten.

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

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Stapelproblem des vertikalen Abstands in Bootstrap-Spalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!