Wie werden Bootstrap -Listen vertikal angeordnet?

Bootstrap selbst bietet keine direkte vertikale Auflistungsfunktion und muss mit seinem Mechanismus geschickt implementiert werden: Flexbox: Fügen Sie der Liste der "D-Flex Flex-Säule" zum übergeordneten Container der Liste hinzu, um Listenelemente vertikal anzuordnen. In Kombination mit Rastersystem: Setzen Sie die Spaltenbreiten für Listenelemente mit komplexen Inhalten und steuern Sie das Layout feiner. Achten Sie darauf, dass Sie die Klassen "Raster Core" von Bootstraps "Row" und "Col" verwenden, um die Verwendung von schwimmenden oder Positionierungsmethoden zu vermeiden.

Bootstrap -Listen, die vertikal angeordnet sind? Diese Frage ist wunderbar. Es scheint einfach, aber es hat tatsächlich ein Geheimnis. Viele Anfänger werden in einige Gruben geraten und denken, dass sie es einfach tun können, indem sie einfach einen Stil hinzufügen, aber tatsächlich sind sie es nicht. Lassen Sie es uns noch heute ausführlich analysieren, damit Sie die Techniken der vertikalen Anordnung von Bootstrap -Listen gründlich beherrschen und diese verrückten Fallstricke vermeiden können.

Zunächst muss klar sein, dass Bootstrap selbst nicht direkt die Funktion "vertikale Anordnung" liefert. Es achtet mehr auf das reaktionsschnelle Layout, und die Anordnung von Listen wird normalerweise durch die Eigenschaften des Containers und der Listenelemente bestimmt. Um es unverblümt auszudrücken, müssen wir den bestehenden Bootstrap -Mechanismus geschickt nutzen, um die Wirkung der vertikalen Anordnung zu erreichen.

Das häufigste Missverständnis besteht darin, den <ul></ul> oder <ol></ol> Tags direkt vertical hinzuzufügen. Das ist überhaupt nutzlos! So werden die Namen von Bootstrap -Klassen nicht gespielt.

Also, was soll ich tun? Das Geheimnis liegt im Rastersystem display Anzeigeattribute und des Bootstraps.

Der einfachste und direkteste Weg ist die Verwendung von Flexbox. Wir müssen nur d-flex flex-column Klasse zum Elternbehälter der Liste hinzufügen. d-flex ermöglicht das Flexbox-Layout, flex-column wird als vertikale Anordnung angegeben. Der Code ist wie folgt:

 <code class="html"><div class="d-flex flex-column"> <ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> </div></code>

Diese Codezeile ist einfach und effizient und löst das Problem sofort. list-group bietet den eigenen Listenstil von Bootstrap, damit Ihre Liste schöner aussieht. Dieser Trick ist einfach und grob, aber einfach zu bedienen!

Aber warte, die Dinge sind noch nicht vorbei. Wenn Ihre Listenelemente komplex sind, z flex-column B. Bilder und Text enthalten, kann es nicht die erwarteten Ergebnisse erzielen. Zu diesem Zeitpunkt benötigen Sie eine raffiniertere Kontrolle. Sie können das Rastersystem von Bootstrap kombinieren, um die Spaltenbreite für jedes Listenelement einzustellen, um das Layout besser zu steuern. Zum Beispiel:

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-6"> <div class="list-group-item">Item 1 with more complex content</div> </div> <div class="col-md-6"> <div class="list-group-item">Item 2 with more complex content</div> </div> </div> </div></code>

Dieser Code verwendet das Rastersystem von Bootstrap, um jedes Listenelement in einer separaten Spalte für ein flexibleres Layout zu platzieren. Beachten Sie, dass ich hier row und col -Klassen verwende, was der Kern des Bootstrap -Rastersystems ist.

Denken Sie daran, versuchen Sie nicht, float oder position zu verwenden, um eine vertikale Anordnung zu erzielen. Sie werden dazu führen, dass Sie in den Sumpf von CSS fallen, und es wird ein Albtraum sein, um zu warten. Das Flexbox und das Gittersystem von Bootstrap sind der richtige Weg!

In Bezug auf die Leistungsoptimierung sind die Leistungsunterschiede zwischen den beiden Methoden schließlich sehr gering. Machen Sie sich nicht zu sehr, wenn die Anzahl der Artikel in Ihrer Liste extrem groß ist. Noch wichtiger ist, dass Sie prägnante und leicht verständliche Code schreiben, um die Wartbarkeit des Codes zu gewährleisten. Dies ist der Schlüssel zur effizienten Programmierung! Opfern Sie keine Lesbarkeit und Wartbarkeit der Code, um extreme Leistung zu erzielen, da der Gewinn den Verlust nicht wert ist!

Das obige ist der detaillierte Inhalt vonWie werden Bootstrap -Listen vertikal angeordnet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!