Bootstrap 4: когда navbar свернут, элемент li отображается горизонтально рядом с навигационной маркой

Question

Я пытался понять это в течение нескольких часов. Я не уверен, что это проблема с Bootstrap 4 или что-то не так с моим синтаксисом. Когда Navbar сворачивается, следующий li отображается справа от текста навигационной марки, а не под ним, как и все остальные элементы.

<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

Я предполагаю, что вы не имели в виду, чтобы бренд был обернут внутри гамбургера. Это правильный пользовательский интерфейс, если вы меня спрашиваете.

Попробуйте

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