Css 使用下拉菜单时导航栏会变得更高（仅在手机上）

在bootstrap中工作时，我试图创建一个水平的顶部导航栏，左侧有一个后退按钮，右侧有一个带有用户首选项和注销的下拉菜单

到目前为止，我的代码如下：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

    <ul class="nav navbar-nav pull-left">
        <li><a href="javascript: history.go(-1)"> &lt; Back</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">

      <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          Usuario <span class="caret"></span>
          </a>
            <ul class="dropdown-menu pull-right" role="menu">
              <li><a href="/user">User</a></li>
              <li class="divider"></li>
              <li><a href="{{logout_url}}">Logout</a></li>
            </ul>
      </li>
    </ul>

</nav>

这在桌面上非常有效，但当我在手机上浏览时，行为会发生变化，使导航栏更高

有人知道为什么吗

---

谢谢

导航栏在移动设备上包含下拉菜单，这是引导方式。如果您不希望出现这种行为，那么您必须更改一些css。在bootstrap.css中找到以下内容，并按如下方式注释或删除。然后，您将拥有桌面行为

@media (max-width: 767px)
    .navbar-nav .open .dropdown-menu {
    /* position: static; */
    /* float: none; */
    /* width: auto; */
    /* margin-top: 0; */
    /* background-color: transparent; */
    /* border: 0; */
    /* -webkit-box-shadow: none; */
    /* box-shadow: none; */
    }
}

---

我认为您没有正确使用引导的

collapse

功能。您忘记了切换导航部分。即使您不想显示“品牌”，也应该包括

部分，因为该部分包括移动版本中的折叠菜单。代码如下：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Delicious</a> <!--delete this line if you don't want a brand-->
    </div>
   <!-- your menu goes here-->
  </div>
</nav>

切换导航

我知道这并不完全是问题所在，但我发现当你不调用所有的部分时，引导会以奇怪的方式中断。所以试试这个。Bootstrap的下拉列表实际上并不适用于移动设备