Angular 2 Bootstrap 4 navbar xuất hiện theo chiều dọc không theo chiều ngang

Question

Khi làm theo hướng dẫn của Angular 2 trên Rails 5, tôi đã xây dựng một thanh điều hướng chính xác cách nó được thực hiện trên hướng dẫn. . Bất kỳ ý tưởng về cách khắc phục sự cố này? Cảm ơn trước

<nav class="navbar navbar-fixed-top navbar-light bg-faded"> 
 
    <div class='container'> 
 
     <ul class="nav navbar-nav"> 
 
      <li class='nav-item'> 
 
       <a class='nav-link' routerLink="/home" routerLinkActive="active">Home</a> 
 
      </li> 
 
      <li class='nav-item'> 
 
       <a class='nav-link' routerLink="/documents" routerLinkActive="active">Docs</a> 
 
      </li> 
 
      <li class="nav-item dropdown"> 
 
       <div ngbDropdown class="d-inline-block dropdown-links"> 
 
        <button class="btn btn-outline-primary" id="proposalDropdown" ngbDropdownToggle> 
 
         Proposals 
 
        </button> 
 
        <div class="dropdown-menu" aria-labelledby="proposalDropdown"> 
 
         <a class="dropdown-item" routerLink="/proposals" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true}">Proposals</a> 
 
         <a class="dropdown-item" routerLink="/proposals/new" routerLinkActive="active">New Proposal</a> 
 
        </div> 
 
       </div> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</nav>

Answer 1

Thêm navbar-toggleable-sm (md/lg) để nav yếu tố để làm cho nó ngang đến sm, nếu không nó sẽ làm cho dọc mỗi lần.

<nav class="navbar navbar-toggleable-sm navbar-fixed-top navbar-light bg-faded"> 

    .... 

</nav> 

Demo Plunker