引导4:当导航条折叠时，li项水平显示在导航条品牌旁边

我已经想了好几个小时了。我不确定这是否是Bootstrap 4的问题，或者我的语法有问题。当导航条折叠时，下一个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>

我还添加了一个codepen http://codepen.io/NachoSupreme/pen/xEgwJz。有人能帮忙吗?