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">
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.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">
<p><strong>Beispiel</strong></p>
<p>Betrachten Sie den folgenden Code:</p>
<pre class="brush:php;toolbar:false"><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">
<p>CSS:</p>
<pre class="brush:php;toolbar:false">@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.