Bootstrap導航欄下拉不滾動

我剛從bootstrap開始，有一個問題可能是一個簡單的修復。我發現類似的問題，但他們都涉及到移動，我的問題是與桌面。它在移動設備上運行良好。Bootstrap導航欄下拉不滾動

我在頁面頂部有一個導航欄設置。它包含一個下拉菜單，其中包含項目列表。一旦這個列表變得太長，剩下的就會被截斷並且無法滾動。

我明白，子菜單不再是引導3.0的一部分，我不想使用它們。無論其中的項目數量如何，我都希望列表滾動。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Website</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/lightbox.css"/> 
    <link rel="stylesheet" href="css/font-awesome.css"/> 
    <link rel="stylesheet" href="css/style.css"/> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
    <script src="../../oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="../../oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 

<!-- NAVBAR --> 
<nav class="navbar navbar-fixed-top" id="main-navbar" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container"> 
       <span class="sr-only">Toggle navigation</span> 
       <i class="fa fa-bars fa-2x"></i> 
      </button> 

      <a href="index.html" class="navbar-brand">Homepage</a> 
     </div> 
     <!-- end navbar-header --> 

     <div class="collapse navbar-collapse" id="navbar-collapse"> 

      <ul class="nav navbar-nav navbar-right nav_color"> 
       <li class="dropdown"> 
        <a href="index.html#" class="dropdown-toggle" data-toggle="dropdown">2015 <strong class="caret"></strong></a> 
        <ul class="dropdown-menu"> 
         <li> <a href="mokuleia.html">Page 1</a> </li> 
         <li> <a href="index.html#">Page 2</a> </li> 
         <li> <a href="index.html#">Page 3</a> </li> 
         <li> <a href="index.html#">Page 4</a> </li> 
         <li> <a href="index.html#">Page 5</a> </li> 
         <li> <a href="index.html#">Page 6</a> </li> 
         <li> <a href="index.html#">Page 7</a> </li> 
         <li> <a href="index.html#">Page 8</a> </li> 
         <li> <a href="index.html#">Page 9</a> </li> 
         <li> <a href="index.html#">Page 10</a> </li> 
         <li> <a href="index.html#">Page 11</a> </li> 
         <li> <a href="index.html#">Page 12</a> </li> 
         <li> <a href="index.html#">Page 13</a> </li> 
         <li> <a href="index.html#">Page 14</a> </li> 
         <li> <a href="index.html#">Page 15</a> </li> 
         <li> <a href="index.html#">Page 16</a> </li> 
         <li> <a href="index.html#">Page 17</a> </li> 
         <li> <a href="index.html#">Page 18</a> </li> 
         <li> <a href="index.html#">Page 19</a> </li> 
         <li> <a href="index.html#">Page 20</a> </li> 
         <li> <a href="index.html#">Page 21</a> </li> 
         <li> <a href="index.html#">Page 21</a> </li> 
         <li> <a href="index.html#">Page 22</a> </li> 
         <li> <a href="index.html#">Page 23</a> </li> 
         <li> <a href="index.html#">Page 24</a> </li> 
         <li> <a href="index.html#">Page 25</a> </li> 
         <li> <a href="index.html#">Page 26</a> </li> 
         <li> <a href="index.html#">Page 27</a> </li> 
         <li> <a href="index.html#">Page 28</a> </li> 
         <li> <a href="index.html#">Page 29</a> </li> 
         <li> <a href="index.html#">Page 30</a> </li> 

        </ul> 
        <!-- end dropdown-menu --> 
       </li> 

      </ul> 
     </div> 
     <!-- end collapse --> 
    </div> 
    <!-- end container --> 
</nav> <!--End navigation--> 



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/lightbox.js"></script> 
<script src="js/script.js"></script> 
</body> 
</html>

來源

2015-07-20 Rob Ewell

這可能是因爲您的頁面高度小於菜單項的高度。所以當你點擊菜單時，額外的菜單被隱藏並且不能滾動。

試試這個：

html, body 
{ 
    height: 100%; 
}

或設定的最低高度爲body至100％

body { 
    min-height: 100%; 
}

如果這兩個不工作嘗試設置一個固定的高度dropdown-menu並使其滾動。

.dropdown-menu{ 
    max-height:300px; 
    overflow-y: scroll; 
}

這裏是一個演示：http://www.bootply.com/fJQczOgeeY

來源

2015-07-21 00:59:58

這三者的第一個建議完全爲我工作。非常感謝您的快速響應！ –

@RobEwell歡迎您:)也請選擇它作爲答案，如果它回答了原始問題 –

Bootstrap導航欄下拉不滾動

回答

相關問題