web-dev-qa-db-fra.com

Pourquoi la barre de navigation Bootstrap 4 est-elle toujours effondrée?

J'ai mis à jour la v1.0-beta de ng-bootstrap. Maintenant, la barre de navigation est toujours repliée. Lorsque je clique sur le hamburger pour basculer le menu, il s'ouvre, mais affiche le contenu verticalement plutôt qu'horizontalement.

J'ai inclus le code pour la navigation ci-dessous. C'est la même chose qu'avant. À ce stade, je ne peux pas déterminer si le problème réside dans ng-bootstrap, bootstrap 4 ou une combinaison de ceux-ci.

Mon résultat idéal est que le menu n'apparaisse qu'une fois que l'écran est sous une certaine taille, comme autrefois.

J'ai vu la barre de navigation Bootstrap4 s'est toujours effondrée . J'ai ouvert cette question car elle n'incluait pas ng-bootstrap.

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded fixed-top" style="background-color: white">
  <button class="navbar-toggler navbar-toggler-right" 
    type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" 
    aria-controls="exCollapsingNavbar2"
    data-toggle="collapse"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Vesalius - Bobby's World</a>
  <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse" id="exCollapsingNavbar2">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link" routerLink="/provider/portal/" routerLinkActive="active">Schedule</a>
      <a class="nav-item nav-link" routerLink="/patient/portal/medical-history" routerLinkActive="active">Form Editor</a>
    </div>

    <div class="navbar-nav">
      <form class="form-inline">
        <input class="form-control mr-sm-2" type="text" placeholder="Search Patient">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

enter image description here

twitter-bootstrapbootstrap-4ng-bootstrap
17
Virmundi

Dans Bootstrap 4, le navbar-expand* la classe est nécessaire si vous souhaitez que la barre de navigation se développe horizontalement, sinon elle prend par défaut la version mobile/réduite. Par conséquent, sans inclure le navbar-expand* classe rend la Navbar toujours réduite.

Voir ces exemples de points d'arrêt navbar

À partir de Bootstrap 4 beta, le navbar-toggleable-* les classes sont devenues navbar-expand-*. Dans ton cas navbar-toggleable-sm deviendrait navbar-expand-md.

39
Zim