Wie zentriere ich Navigationselemente in einer Bootstrap 4-Navigationsleiste?

Navigationselemente in Bootstrap zentrieren

In Bootstrap 4 kann die Ausrichtung von Navigationselementen (Links) in der Mitte der Navigationsleiste durch die Verwendung erreicht werden Flexbox-Eigenschaften. So geht's:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">

CSS:

.navbar {
    display: flex;
    justify-content: center;
}

Der obige Code verwendet die Display-Eigenschaft von Flexbox, um die Navigationsleiste auf einen Flex-Container festzulegen, und justify-content, um die Navigationselemente daran auszurichten Center. Die Collapse-Klasse von Bootstrap wird verwendet, um die Navigationselemente auf kleineren Bildschirmgrößen auszublenden.

Responsive Adjustment

Für die Reaktionsfähigkeit können Sie die Dienstprogrammklasse mr-auto von Bootstrap verwenden, um sicherzustellen, dass Die Navigationselemente werden entsprechend der Browsergröße korrekt zentriert Änderungen:

<div class="collapse navbar-collapse mr-auto">

Beispiel

Betrachten Sie den folgenden Code:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">

CSS:

@media (min-width: 768px) {
    .navbar-nav {
        justify-content: center;
    }
}

Dies Der Code fügt eine Medienabfrage hinzu, die den justify-content entsprechend festlegt, wenn die Breite des Browserfensters größer als 768 Pixel ist, und zentriert die Navigationselemente nur auf größeren Bildschirmen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Navigationselemente in einer Bootstrap 4-Navigationsleiste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!