使用下拉菜单时导航栏会变得更高（仅在移动设备上）

在引导过程中工作时，我试着做一个水平顶部导航栏，左侧有一个后退按钮，右侧有一个用户首选项和右侧退出的下拉菜单。使用下拉菜单时导航栏会变得更高（仅在移动设备上）

到目前为止，我的代码是这样的：

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

这在桌面上完美的作品，但是当我做浏览的手机，行为改变，使导航栏高。

任何人都有一个想法，为什么？

感谢

来源

2014-09-04 unaiherran

导航栏包括在移动中它的下拉列表中，这就是引导的方式。如果你不想这种行为，那么你将不得不改变一些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; */ 
    } 
}

来源

2014-09-04 15:05:33

谢谢。需要几周才能注意到这一点。 – unaiherran 2014-09-04 15:35:17

你使用正确引导的collapse功能我不认为。您忘记了切换导航部分。即使您不想显示“品牌”，该部分也应包含<div class="navbar-header">部分，因为该部分包含移动版本中的折叠菜单。下面是代码：

<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并不是真正意义上的移动设备。

来源

2014-09-04 15:18:04 spasticninja

使用下拉菜单时导航栏会变得更高（仅在移动设备上）

回答

相关问题