Comment centrer les éléments de navigation dans une barre de navigation Bootstrap 4 ?

Centrage des éléments de navigation dans Bootstrap

Dans Bootstrap 4, l'alignement des éléments de navigation (liens) au centre de la barre de navigation peut être obtenu en utilisant Propriétés de la boîte flexible. Voici comment procéder :

<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;
}

Le code ci-dessus utilise la propriété display de flexbox pour définir la barre de navigation sur un conteneur flexible et justifier le contenu pour aligner les éléments de navigation sur le centre. La classe de réduction de Bootstrap est utilisée pour masquer les éléments de navigation sur des tailles d'écran plus petites.

Ajustement réactif

Pour plus de réactivité, vous pouvez utiliser la classe utilitaire mr-auto de Bootstrap pour garantir la les éléments de navigation sont centrés correctement en fonction de la taille du navigateur changements :

<div class="collapse navbar-collapse mr-auto">
<p><strong>Exemple</strong></p>
<p>Considérez le code suivant :</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;
    }
}

Ce le code ajoute une requête multimédia qui définit le contenu justifié en conséquence lorsque la largeur de la fenêtre du navigateur est supérieure à 768 pixels, centrant les éléments de navigation uniquement sur écrans plus grands.