使用下拉菜單時導航欄會變得更高（僅在移動設備上）

在引導過程中工作時，我試着做一個水平頂部導航欄，左側有一個後退按鈕，右側有一個用戶首選項和右側退出的下拉菜單。使用下拉菜單時導航欄會變得更高（僅在移動設備上）

到目前爲止，我的代碼是這樣的：

<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

使用下拉菜單時導航欄會變得更高（僅在移動設備上）

回答

相關問題