Bootstrap 4導航欄項目跳轉到下面幷包裝

Question

我想用最新的bootstrap4（alpha6）做一個導航欄。

<nav role="navigation" class="navbar navbar-light bg-faded"> 
<a class="navbar-brand" href="/"> 
    <img src="/public/img/logo.png" height="36" alt="myLogo"> 
    <span class="navbar-text">Food on Track</span> 
</a> 
<ul class="ml-auto nav"> 
    <li class="nav-item"> 
     <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align: middle;"> 
      <g><path d="..."></path></g> 
     </svg> 
    </li> 
</ul> 

是什麼力量讓導航品牌的最佳途徑和物品適合使用引導4一行？ 下面是Codeply

Answer 1

閱讀docs for the navbar。

使用navbar-nav而不是nav和navbar-toggleable-*類來保持導航水平直到它將垂直摺疊時的特定斷點。

<nav role="navigation" class="navbar navbar-light bg-faded navbar-toggleable-md"> 
    <a class="navbar-brand" href="/"> 
     <img src="/public/img/logo.png" height="36" alt="myLogo"> 
     Food on Track 
    </a> 
    <ul class="navbar-nav ml-auto"> 
     <li class="nav-item"> 
      <svg> 
      </svg> 
     </li> 
    </ul> 
</nav> 

演示：https://www.codeply.com/go/iAGnRLMCE1

更新2018

在引導4.0.0 navbar-toggleable-*已更改爲navbar-expand-*

Answer 2

鏈接試試這個

<nav role="navigation" class="navbar navbar-light bg-faded"> 
<div class="row"> 
<div class="col-md-10"> 
<a class="navbar-brand" href="/"> 
    <img src="/public/img/logo.png" height="36" alt="myLogo"> 
    <span class="navbar-text">Food on Track</span> 
</a> 
</div> 
<div class="col-md-2"> 
<ul class="ml-auto nav"> 
    <li class="nav-item"> 
     <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align: middle;"> 
      <g><path d="..."></path></g> 
     </svg> 
    </li> 
</ul> 
</div> 
</div> 
</nav>