bootstrap 4 navbar - コンテンツが崩壊時にブランドの下にジャンプ

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> Sを追加するなど、失敗した

...ナビゲーションバーがない上に 任意の要素が追加されました。

<div>を<brand>の前に置くと、折りたたまれた後にすべてがブランドの上に重なります。

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

EDIT

私は私があなたのことを理解して考えますトグラーの左側に余分なリンクを常ににします。その場合、あなたはトグラーからスペースも道にフレキシボックスutilsパッケージとマージンを使用して水平を維持するnavbar-navを強制する必要があると思います。..

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

Codeply updated