Article original : Bootstrap 4: How to Make Top Fixed Navbar Stay in Container and Not Stretch?

Il existe de nombreuses façons de faire en sorte qu'une navbar fixe reste à l'intérieur d'un conteneur parent div. Nous allons passer en revue la méthode la plus simple ici.

Imaginez que vous avez le code suivant, légèrement modifié à partir de la documentation Bootstrap :

<div class="container">
  <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
    <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Basculer la navigation">
    </button>
    <div class="collapse navbar-toggleable-md" id="navbarResponsive">
      <a class="navbar-brand" href="#">
        <img src="" width="30" height="30" class="d-inline-block align-top" alt="">Navbar
      </a>
      <ul class="nav navbar-nav float-md-right">
        <li class="nav-item active">
          <a class="nav-link" href="#">Accueil
            <span class="sr-only">(actuel)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Lien</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Lien</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="next"></div>
  bonjour
</div>

div.next {
  background-color: lightblue;
  width: 100%;
  height: 60rem;
}

Et votre page ressemble à ceci :

Image

Solutions

Bien que la documentation indique "Les navbars et leur contenu sont fluides par défaut. Utilisez des conteneurs optionnels pour limiter leur largeur horizontale", la solution la plus simple est d'utiliser CSS pour définir directement la largeur de la navbar :

div.next {
  background-color: lightblue;
  width: 100%;
  height: 60rem;
}

.container {
  padding: 0px;
}

nav.navbar {
  width: inherit;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}

En ajoutant des règles ciblant .container et nav.navbar, votre navbar a maintenant la même largeur que le conteneur parent :

Image