Comment puis-je centrer les éléments de navigation dans Bootstrap 4 ?

Centrage des éléments de navigation dans Bootstrap

Dans Bootstrap 4, l'alignement horizontal des éléments de navigation (liens) peut être réalisé à l'aide des utilitaires flexbox et margin.

Bootstrap 4 Alpha 6 et Plus tard

Pour centrer à la fois la marque et les liens dans Bootstrap 4 alpha 6 et versions ultérieures :

<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" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="d-md-flex d-block flex-row mx-md-auto mx-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse mr-auto">

Dans ce code, les classes d-md-flex et d-block sont utilisées pour aligner la marque et les liens horizontalement sur les écrans de taille moyenne et supérieure. La classe flex-row garantit que les éléments sont disposés côte à côte. Les classes mx-md-auto et mx-0 centrent les éléments dans l'espace disponible, en ajustant la largeur de l'image de la marque.

Bootstrap 4.1

Pour Bootstrap 4.1 :

<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" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">

Dans ce cas, mx-auto est appliqué directement sur la barre de navigation-nav pour centrer les liens seulement. La marque peut être centrée à l'aide d'autres techniques telles que justifier-content-center.

Positionnement des liens exactement dans la fenêtre

Pour centrer les liens exactement dans la fenêtre, considérez ceci technique :

<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" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-nav">

Ici, la navbar-nav reçoit une largeur fixe et justifier-content: center pour aligner les liens précisément dans le centre de l'écran.

Pour une personnalisation plus approfondie et des exemples supplémentaires, reportez-vous aux liens fournis dans la section de référence ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!