Bootstrap 4：当导航栏折叠时，li项目在导航栏品牌旁边水平显示[重复]答案

【问题标题】：Bootstrap 4: when navbar is collapsed li item is displayed horizontally next to navbar-brand [duplicate]Bootstrap 4：当导航栏折叠时，li项目在导航栏品牌旁边水平显示[重复]
【发布时间】：2016-09-22 00:42:18
【问题描述】：

我已经尝试了好几个小时来解决这个问题。我不确定这是 Bootstrap 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。有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery css html twitter-bootstrap-4

【解决方案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>

【讨论】：

我确实希望品牌在 UI 中得到体现。我只想让所有的 li 元素在折叠视图中直接落在品牌之下。目前，“关于”li 元素与品牌是水平的，而不是与其他项目垂直的。
为什么要把品牌包装在汉堡包里？糟糕的用户体验。您想在移动设备上隐藏徽标吗？
我同意你的看法，这是不好的品牌。但是，这是我正在进行的一个项目，这是要求的一部分。