


Wie kann ich Bootstrap-Spalten für Desktop- und Mobilansichten unterschiedlich neu anordnen?
Dec 07, 2024 pm 12:22 PMStapeln von Bootstrap-Spalten in unterschiedlicher Reihenfolge auf Mobilgeräten
In Bootstrap 4 kann es etwas schwierig sein, die Anordnung der Spalten anzupassen, wenn zwischen Desktop- und Mobilansichten gewechselt wird. Gehen wir ein bestimmtes Szenario an: Sie haben zwei Spalten und eine verschachtelte Zeile in der rechten Spalte. Ihr Ziel besteht darin, das Layout so zu gestalten, dass es wie folgt angezeigt wird:
Desktop-Version:
--------- ------ | 2 || 1 | | || | | |------- | || 3 | | || | | |------- | | | | ---------
Mobile Version (in der Reihenfolge gestapelt):
-------- | 1 | | | -------- | 2 | | | | | | | | | | | -------- | 3 | | | --------
Verwenden von Floats und Deaktivieren Flexbox
Das Standard-Flexbox-Layout in Bootstrap 4 gewährleistet die gleiche Höhe der Spalten. Um das gewünschte Desktop-Layout zu erreichen, können Sie Flexbox für große Bildschirme deaktivieren und stattdessen Floats verwenden:
<div class="container"> <div class="row d-flex d-lg-block"> <div class="col-lg-8 order-1 float-left"> <div class="card card-body tall">2</div> </div> <div class="col-lg-4 order-0 float-left"> <div class="card card-body">1</div> </div> <div class="col-lg-4 order-1 float-left"> <div class="card card-body">3</div> </div> </div> </div>
Flexbox Wrapping Hack verwenden
Alternativ können Sie einen Flexbox Wrapping Hack verwenden, der w verwendet -auto:
<div class="container"> <div class="row"> <div class="col-lg-8 order-1"> <div class="card card-body">2</div> </div> <div class="col-lg-4 order-0"> <div class="card card-body w-auto">1</div> </div> <div class="col-lg-4 order-1"> <div class="card card-body w-auto">3</div> </div> </div> </div>
Überlegungen
Beide Ansätze haben ihre eigenen Vorteile und Nachteile. Die Float-Methode ist einfacher, kann jedoch Probleme mit der Ausrichtung und Reaktionsfähigkeit verursachen. Der Wrapping-Hack bietet eine bessere Reaktionsfähigkeit, erfordert jedoch komplexeres CSS.
Zusätzliche Ressourcen
- [Wie behebe ich eine unerwartete Spaltenreihenfolge in Bootstrap 4?](...)
- [Bootstrap Responsive Columns Height](...)
- B-A-C -> A-B-C
Das obige ist der detaillierte Inhalt vonWie kann ich Bootstrap-Spalten für Desktop- und Mobilansichten unterschiedlich neu anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)

Datei hochladen mit Multer in node.js und ausdrücken
