Wie erreicht man mithilfe von Push- und Pull-Klassen reaktionsfähige Bootstrap-Spaltenlayouts mit variablen Bildschirmgrößen?

Responsive Bootstrap-Spaltenlayouts mit variablen Bildschirmgrößen

Bei der Webentwicklung ist es oft notwendig, das Layout einer Seite basierend auf dem des Betrachters anzupassen Bildschirmgröße. Bootstrap bietet eine praktische Möglichkeit, dies mithilfe von Push- und Pull-Klassen zu tun.

Spalten in Bootstrap pushen und ziehen

Um eine Spalte zu pushen oder zu ziehen, fügen Sie einfach die entsprechenden Klassen hinzu zum HTML-Element der Spalte. Die Syntax für diese Klassen lautet:

col-{breakpoint}-{size}

Um beispielsweise eine Spalte auf kleinen Bildschirmen um zwei Spalten nach rechts zu verschieben (d. h. „xs“), würden Sie die Klasse col-xs-push- hinzufügen. 2. Um eine Spalte auf großen Bildschirmen um drei Spalten nach links zu ziehen (z. B. „lg“), würden Sie die Klasse col-lg-pull-3 hinzufügen.

Spalten auf kleinere Bildschirme verschieben/ziehen Bildschirmgrößen

Um das gewünschte Layout in der gegebenen Frage zu erreichen, ist es wichtig, zunächst Klassen zu verwenden, die auf kleinere Bildschirmgrößen abzielen. Dadurch wird sichergestellt, dass der Mobile-First-Ansatz beibehalten wird.

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div>

Das obige ist der detaillierte Inhalt vonWie erreicht man mithilfe von Push- und Pull-Klassen reaktionsfähige Bootstrap-Spaltenlayouts mit variablen Bildschirmgrößen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!