2015-07-20 3 views
1

Я только начинаю с бутстрапа и имею проблему, которая, вероятно, легкая проблема. Я нашел похожие вопросы, но все они касались мобильных устройств, и моя проблема связана с рабочим столом. Он отлично работает на мобильных устройствах.Bootstrap navbar dropdown не прокрутка

У меня есть настройка навигации в верхней части моей страницы. Он содержит выпадающее меню со списком элементов внутри него. Как только этот список станет слишком длинным, остальная часть будет отключена и не сможет прокручиваться.

Я понимаю, что подменю больше не являются частью 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> 

ответ

7

Это может произойти из-за того, что высота вашей страницы меньше высоты элементов меню. Поэтому, когда вы нажимаете меню, дополнительные меню скрыты и не прокручиваются.

Попробуйте это:

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

+0

Это первое предложение из трех прекрасно работал для меня. Большое вам спасибо за ваш быстрый ответ! –

+0

@RobEwell приветствуется :) также, пожалуйста, выберите его как ответ, если он ответил на исходный вопрос –

Смежные вопросы