bootstrap 4導航欄 - 內容在摺疊下跳到品牌下

Question

我試圖用最新的boot4（alpha6）製作雙導航欄。

http://codepen.io/anon/pen/qrERBP

<nav class="navbar navbar-toggleable-md navbar-light navbar-inverse bg-faded" style="background-color: #000000"> 

    <button class="navbar-toggler navbar-toggler-right navina" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 

<!-- <div class="navbar-header"> --> 
    <a class="navbar-brand navina" href="/"> 
     <img src="/images/logow.png" class="img-fluid" alt="Responsive image"> 
    </a> 
    <ul class="navbar-nav navina hidden-lg-up float-right"> 
     <img src="/images/search.png"> 
    </ul> 
<!-- </div> --> 
    <!-- <div id="navbarNavDropdown" class="navbar-collapse collapse"> --> 
    <ul class="navbar-nav mr-auto"> 
    </ul> 
    <ul class="navbar-nav navina hidden-md-down"> 
     <li class="nav-item navina"> 
     <a class="nav-link" href="/kosik/"> 
      <img src="/images/kosik.png" class="img-rounded" aria-hidden="true" style="height:25px; width:25px"> Košík 
      <span class="badge"></span> 
     </a> 
     </li> 
     <li class="nav-item dropdown navina"> 
     <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/images/pouz.png" class="img-circle" style="height:25px; width:25px"><span class="caret"></span> 
      Používateľ 
     </a> 
     <div class="dropdown-menu my-2 my-lg-0" aria-labelledby="navbarDropdownMenuLink" align="right"> 
      {{# if login}} 
      <a class="dropdown-item" href="/user/userprofile">Tvoj účet</a> 
      <a class="dropdown-item" href="/user/logout">Odhlásiť</a> 
      {{ else }} 
      <a class="dropdown-item" href="/user/login">Prihlás sa</a> 
      <a class="dropdown-item" href="/user/signup"> Zaregistrovať </a> 
      {{/if}} 
     </div> 
     </li> 
    </ul> 
    <!-- </div> --> 
</nav> 

使用中等或較小的視口，我希望下部導航欄崩潰到在導航欄上一個右對齊漢堡菜單。 用戶和購物車圖標以及搜索圖標應該位於此漢堡菜單的左側。

但在摺疊時，新圖標跳到品牌下方。 任何元素添加到導航欄確實...

我已經花了近3天，這和幾種不同的方法失敗，包括添加其他<button>秒（這堆在自己的上方）或浮動/利潤率。

如果我在<brand>之前將<div>放在崩潰後的品牌上方。

Answer 1

把搜索圖標，右側的其他鏈接，並使用ml-auto對齊的權利..

<nav class="navbar navbar-toggleable-md navbar-light navbar-inverse bg-faded" style="background-color: #000000"> 
    <button class="navbar-toggler navbar-toggler-right navina" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand navina" href="/"> 
     <img src="/images/logow.png" class="img-fluid" alt="Responsive image"> 
    </a> 
    <ul class="navbar-nav hidden-md-down ml-auto"> 
     <li class="nav-item"> 
      <a class="nav-link"><img src="/images/search.png" alt="search"></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="/kosik/"> 
       <img src="/images/kosik.png" class="img-rounded" aria-hidden="true" style="height:25px; width:25px"> Košík 
       <span class="badge"></span> 
      </a> 
     </li> 
     <li class="nav-item dropdown"> 
      <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/images/pouz.png" class="img-circle" style="height:25px; width:25px"><span class="caret"></span> Používateľ 
      </a> 
      <div class="dropdown-menu my-2 my-lg-0" aria-labelledby="navbarDropdownMenuLink" align="right"> 
       {{# if login}} 
       <a class="dropdown-item" href="/user/userprofile">Tvoj účet</a> 
       <a class="dropdown-item" href="/user/logout">Odhlásiť</a> {{ else }} 
       <a class="dropdown-item" href="/user/login">Prihlás sa</a> 
       <a class="dropdown-item" href="/user/signup"> Zaregistrovať </a> {{/if}} 
      </div> 
     </li> 
    </ul> 
</nav> 

http://www.codeply.com/go/ztTrZaszBU

編輯

我想我明白你要額外鏈接總是到開關的左側。在這種情況下，你必須強制navbar-nav使用Flexbox的utils的和利潤率從toggler空間它的方式來保持水平..

<ul class="navbar-nav d-flex flex-row flex-nowrap ml-auto mr-sm-5 mr-md-5 mr-lg-0">..</ul>

Codeply updated