Question

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

在桌面上完美运行，但是当我在手机中进行浏览时，行为会发生变化，并使导航栏更高。

任何人都知道为什么？

由于

Answer 1

导航栏包含移动设备中的下拉列表，它是引导程序。如果您不想要这种行为，那么您将不得不更改一些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; */
    }
}

Answer 2

我认为您没有正确使用引导程序的collapse功能。你忘记了切换导航部分。您应该包含<div class="navbar-header">部分，即使您不想展示＆＃34;品牌＆＃34;该部分包括移动版本中的折叠菜单。这是代码：

<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的Dropdown并不适合移动设备。

使用下拉菜单时导航栏变高（仅限移动设备）

2 个答案: