2017-08-30 313 views
6

我更新到ng-bootstrap的v1.0-beta版。現在導航欄始終是拼合的。當我點擊漢堡切換菜單時,它會打開,但垂直而不是水平顯示內容。導航欄總是摺疊

我已經在下面包含了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*類,否則默認爲移動/摺疊版本。

從Bootstrap 4測試版開始,navbar-toggleable-*類已更改爲navbar-expand-*。在你的情況下,navbar-toggleable-sm將更改爲navbar-expand-md