Question

Bootstrap 4を実装するAngular 2 on Rails 5チュートリアルに従うと、Navbarはチュートリアルでどのように行われたかを正確には作りましたが、 。どのようにこの問題を解決するための任意のアイデア？事前のおかげで

<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

は、それ以外の場合は、すべての時間を垂直にレンダリングされるだろう、それは水平smまで作ることnav要素に（md/lg）navbar-toggleable-smを追加します。

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

    .... 

</nav> 

Demo Plunker