Wie kann ich in Bootstrap 4 eine zweizeilige Navigationsleiste erstellen?-CSS-Tutorial-php.cn

Wie kann ich in Bootstrap 4 eine zweizeilige Navigationsleiste erstellen?

Susan Sarandon

Freigeben： 2024-12-10 00:55:10

Original

212 Leute haben es durchsucht

How can I create a two-row navbar in Bootstrap 4?

Bootstrap 4-Navigationsleiste mit 2 Zeilen

In Bootstrap 4 ist es möglich, mithilfe der Flexbox-Dienstprogrammklassen eine Navigationsleiste mit zwei Zeilen zu erstellen. So können Sie dies erreichen:

Fügen Sie die Flex-Column-Klasse zum .navbar-collapse-Div hinzu. Dadurch werden die beiden Navigationsleisten vertikal gestapelt.

Legen Sie die Eigenschaft „Flex-Direction: Column“ für das .navbar-brand-Element fest. Dadurch wird das Logo vertikal an den Navigationsleisten-Links ausgerichtet.

Optional können Sie die Flex-Row-Klasse zur zweiten Navigationsleiste hinzufügen um die Symbole auszurichten horizontal.

Hier ist eine aktualisierte Version Ihres Codes:


    
        
        
        
Das obige ist der detaillierte Inhalt vonWie kann ich in Bootstrap 4 eine zweizeilige Navigationsleiste erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie erstelle ich mit CSS und JavaScript eine zweispaltige ungeordnete Liste? Nächster Artikel：Wie simuliere ich CSS „background-size: cover“ mit Canvas?

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2166

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2316

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1950

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...