Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

不言
Freigeben: 2018-11-06 13:46:55
Original
3501 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
    }
    }
Nach dem Login kopieren

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;
    }
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage