web-dev-qa-db-ja.com

なぜBootstrap 4 Navbarは常に折りたたまれていますか？

Ng-bootstrapのv1.0-betaに更新しました。現在、ナビゲーションバーは常に折りたたまれています。ハンバーガーをクリックしてメニューを切り替えると、メニューが開きますが、内容は水平ではなく垂直に表示されます。

以下にnavのコードを含めました。以前と同じです。この時点で、問題がng-bootstrap、bootstrap 4、またはそれらの組み合わせにあるかどうかをいじることはできません。

私の理想的な結果は、昔のように、画面が特定のサイズを下回るとメニューが表示されることです。

Bootstrap4 navbarは常に折りたたまれています を確認しました。 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

Bootstrap 4では、navbarを水平方向に展開する場合はnavbar-expand*クラスが必要です。そうでない場合は、デフォルトでモバイル/折りたたみバージョンになります。したがって、navbar-expand*クラスは、Navbaralwaysを折りたたみます。

これらを参照してください navbarブレークポイントの例

Bootstrap 4 beta、現在、navbar-toggleable-*クラスはnavbar-expand-*に変更されています。あなたの場合、navbar-toggleable-smはnavbar-expand-mdに変更されます。

39
Zim