2017-01-18 17 views
5

Podczas korzystania z samouczka Angular 2 on Rails 5, który implementuje bootstrap 4 Zbudowałem pasek nawigacyjny dokładnie tak, jak zostało to zrobione w samouczku, ale jakoś mój pasek nawigacji pojawia się pionowo, kiedy powinien wyglądać poziomo . Wszelkie pomysły dotyczące rozwiązania tego problemu? Dzięki z góryAngara 2 Bootstrap 4 - pasek nawigacji pojawia się pionowo, a nie poziomo.

<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>

+1

Czy masz włączone bootstrap do swojej strony. Wygląda na to, że nie masz żadnego stylu. Musisz albo CDN albo pobrać bootstrap i połączyć css. – Gilbert

Odpowiedz

9

Dodaj navbar-toggleable-sm (md/lg) do nav elementu, aby go poziomo do sm, w przeciwnym razie byłoby to uczynić w pionie za każdym razem.

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

    .... 

</nav> 

Demo Plunker