ブートストラップ4：navbarが折り​​たたまれているとき、li項目がnavbar-brandの横に水平に表示されます

Question

私はこれを数時間試してみました。私はそれがブートストラップ4の問題であるか、私の構文に何か問題があるかどうかはわかりません。 Navbarが崩壊すると、次のliはnavbar-brandテキストの右側に表示され、他のすべてのアイテムと同様に表示されません。

<nav class="navbar navbar-fixed-top navbar-dark bg-primary"> 
      <div class="container"> 
       <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> 
       &#9776; 
       </button> 
       <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> 
       <div class="nav-item"> 
        <a class="navbar-brand nav-link" href="#">IMGS</a> 
       </div> 

       <ul class="nav navbar-nav"> 

        <li class="nav-item"> 
        <a class="nav-link" href="#">About</a> 
        </li> 

        <li class="nav-item"> 
        <a class="nav-link" href="#">Contact</a> 
        </li> 
       </ul> 

       <ul class="nav navbar-nav pull-sm-right"> 
       <li class="nav-item"> 
        <a class="nav-item nav-link" href="#">Sign Up</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-item nav-link" href="#">Login</a> 
       </li> 
       </ul> 
       </div> 
      </nav> 

さらに、コードコードhttp://codepen.io/NachoSupreme/pen/xEgwJzを追加しました。誰も助けることができますか？

Answer 1

私はあなたがブランドがハンバーガーの中で包まれることを意味しなかったと仮定しています。あなたが私に尋ねるなら、これは正しいUIです。

は、私はブランドがUIで包むしたいです。この

<nav class="navbar navbar-fixed-top navbar-dark bg-primary"> 
<div class="container"> 
    <a class="navbar-brand nav-link" href="#">IMGS</a> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> 
    &#9776; 
    </button> 
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> 
    <div class="nav-item"> 

    </div> 

    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
     </li> 

     <li class="nav-item"> 
     <a class="nav-link" href="#">Contact</a> 
     </li> 
    </ul> 

    <ul class="nav navbar-nav pull-sm-right"> 
    <li class="nav-item"> 
     <a class="nav-item nav-link" href="#">Sign Up</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-item nav-link" href="#">Login</a> 
    </li> 
    </ul> 
    </div> 
</nav>