Wie ordne ich Bootstrap -Listen horizontal an?

Wie ordne ich die Bootstrap -Liste horizontal an? Platzieren Sie das Listenelement in einer Zeile mit der Zeilenklasse. Verwenden Sie die COL-Klasse, um die Breite des Listenelements wie Col-MD-4 zu steuern, um 4 Spalten unter mittlerer Bildschirmgröße darzustellen. Die inneren und äußeren Ränder können mit P-2 und MX-2 eingestellt werden. Verwenden Sie die D-Flex-Flex-Wrap, um die Flexbox für automatische Linienverpackung in der Zeile zu aktivieren. Verwenden Sie Col-MD-Auto, um die Liste automatisch die erforderliche Breite zu belegen.

Bootstrap -Liste Horizontale Anordnung? Diese Frage ist großartig! Viele Anfänger werden hier stecken bleiben, aber es ist nicht so kompliziert. Der Schlüssel ist, das Gittersystem von Bootstrap und einige Tipps zu verstehen. In diesem Artikel werde ich Sie von den Grundlagen zum Fortgeschrittenen bringen und die horizontale Anordnung der Bootstrap -Liste vollständig aussortieren und einige Fallstricke und einige einzigartige Geheimnisse teilen, auf die ich im Laufe der Jahre getreten bin.

Sprechen wir zuerst über die Grundlagen. Sie müssen verstehen, wie Bootstrap mit einem Netzsystem angelegt wird. Es verwendet row und col -Klassen, um die Anordnung von Elementen zu kontrollieren. row repräsentiert eine Zeile, und col- folgt eine Zahl, die angibt, wie viele Spalten das Element einnimmt. Zum Beispiel nimmt col-md-4 -Mittelwerte 4 Spalten unter mittlerer Bildschirmgröße mit insgesamt 12 Spalten ein. Wenn Sie dieses Netzsystem nicht verstehen, sind die dahinter nutzlos.

Gehen wir nun direkt zum Thema: Wie arrangieren Sie die Liste horizontal? Die einfachste und rohste Methode besteht darin, das Listenelement li in row zu setzen und dann col -Klasse zu verwenden, um die Breite jedes li zu steuern. So was:

 <code class="html"><div class="row"> <div class="col-md-4"> <li>Item 1</li> </div> <div class="col-md-4"> <li>Item 2</li> </div> <div class="col-md-4"> <li>Item 3</li> </div> </div></code>

Hast du es gesehen? col-md-4 ermöglicht es jedem Listenelement, 4 Spalten zu besetzen, und drei Elemente, die nur eine Reihe belegen, die perfekt horizontal angeordnet sind! Natürlich können Sie auch col-sm- , col-lg- usw. verwenden, um die Anordnung verschiedener Bildschirmgrößen je nach Entwurfsanforderungen zu steuern.

Aber warte! Dies ist einfach die grundlegendste Verwendung. In der tatsächlichen Anwendung können Sie komplexere Situationen begegnen. Beispielsweise ist die Breite des Listenelements nicht behoben, oder Sie möchten zwischen den Listenelementen einen Abstand haben.

Zu diesem Zeitpunkt müssen Sie andere von Bootstrap bereitgestellte Klassen verwenden. p-2 kann innere Ränder hinzufügen, mx-2 kann horizontale Ränder hinzufügen. Sie können diese Werte nach Bedarf einstellen.

Was ist, wenn Sie möchten, dass die Listenelemente automatisch einwickeln, sie horizontal halten, sie jedoch automatisch in die nächste Zeile wickeln, wenn sie die Bildschirmbreite überschreiten? Dies erfordert Flexbox. Das Hinzufügen d-flex flex-wrap Klasse zur row kann diesen Effekt erzielen.

 <code class="html"><div class="row d-flex flex-wrap"> <div class="col-md-auto p-2"> <li>Item 1</li> </div> <div class="col-md-auto p-2"> <li>Item 2</li> </div> <div class="col-md-auto p-2"> <li>Item 3</li> </div> <div class="col-md-auto p-2"> <li>Item 4</li> </div> <!-- 可以添加更多列表项--> </div></code>

Hier können Sie col-md-auto jedes Listenelement die erforderliche Breite automatisch belegen, während flex-wrap das Leitungsverpackung ermöglicht. Denken Sie daran p-2 , dies hilft Ihnen dabei, den Abstand leicht zu steuern und zu vermeiden, dass Listenartikel zusammengedrängt werden.

Schließlich einige Erfahrung: Verlassen Sie sich nicht zu sehr auf den Standardstil von Bootstrap und lernen Sie, sich an Ihre Bedürfnisse anzupassen. Probieren Sie verschiedene Kombinationen von Klassen und Attributen aus, um die beste Lösung für Ihr Projekt zu finden. Haben Sie keine Angst, den Code mutig zu ändern und aus den Fehlern zu lernen, damit Sie ein echter Bootstrap -Master werden können! Denken Sie daran, Praxis bringt wahres Wissen!

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