2017-08-30 13 views
6

ng-bootstrapのv1.0-betaに更新されました。これで、navbarは常にコラプスされます。ハンバーガーをクリックしてメニューを切り替えると、メニューが開きますが、内容は水平方向ではなく垂直方向に表示されます。Navbarは常に崩壊しました

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

私の理想的な結果は、メニューが昔のように画面が一定のサイズになったときにのみ表示されることです。

私はBootstrap4 navbar always collapsedを見ました。私は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

答えて

24

あなたはナビゲーションバーが折りたたま/モバイル版に、水平にそれ以外の場合はデフォルトを展開したい場合はnavbar-expand*クラスが必要とされています。

ブートストラップ4ベータ版では、navbar-toggleable-*クラスがnavbar-expand-*に変更されました。あなたの場合、navbar-toggleable-smnavbar-expand-mdに変更されます。

関連する問題