Bootstrap Navbar折叠下拉菜单

我正在使用导航栏中的下拉框在Bootstrap网站上工作。当导航栏处于折叠模式时。在下拉菜单中没有响应没有人知道为什么会发生这种事Bootstrap Navbar折叠下拉菜单

该网站可以在http://horizonarb.co.uk/index.html

的代码如下发现;

非常感谢！

<!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"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Horizon Arboriculture</title> 

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

    <!-- Google Fonts --> 
    <script src="js/googleFonts.js" type="text/javascript"></script> 

    <link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'> 

    <!-- Custom CSS --> 
    <link href="css/custom.css" rel="stylesheet"></link> 

    <!-- Font Awesome --> 
    <link rel="stylesheet" href="css/fontawesome/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 

    <div class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px;"> 

     <div class="container"> 

      <div class="navbar-header"> 

       <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <small>MENU</small> 
       </button> 

      <a href=""><img src="img/front/HorizonArb_Tree_Transparent.png" class="noResize"></a> 

      </div> <!-- class="navbar-header" --> 

      <div class="collapse navbar-collapse"> 

       <ul class="nav nav-pills navbar-right"> 

        <li class="active"><a href="index.html">Home</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Crown Thinning</a></li> 
          <li><a href="#">Crown Lifting</a></li> 
          <li><a href="#">Crown Reduction</a></li> 
         </ul> 
        </li> 
        <li><a href="contact.php">Contact</a></li> 

       </ul> 

      </div> <!-- class="collapse navbar-collapse" --> 

     </div> <!-- class="container" --> 

     </div> <!-- class="navbar navbar-default" -->  



     <div class="container" id="topContainer"> 

     <div class="row"> 

      <div class="col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-3 center marginTopThirty"> 

       <img src="img/front/HorizonArb_Transparent.png" width="70%"> 


      </div> 







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

来源

2015-12-04 David Mason

您使用的是哪种浏览器？它在FF中为我工作。 –

它在我的FF中不起作用。你是否在尝试使用手机尺寸？ –

它的确如此。它虽然有垂直滚动。这可能是问题所在。 –

下拉菜单是打开和关闭的，但是它被容器隐藏起来。以下CSS应该修复：

.navbar-static-top .navbar-collapse.in { 
    overflow-y: visible; /* Bootstrap default is "auto" */ 
}

来源

2015-12-04 16:27:56 Blazemonger

我看到了这一点，并打算评论，但这是在引导样式是汽车，这应该不需要改变它应该吗？看看OP的网站上的下拉菜单是如何工作的，看起来好像没有正确编码..这可能是问题所在。 – Lee

[Bootstrap文档]（http://getbootstrap.com/javascript/#dropdowns）显示了折叠导航栏内的下拉菜单，但其导航栏是手风琴风格，而OP是一排按钮。我的理论是Bootstrap开发人员设想了一个不同于OP已经实现的用例。 – Blazemonger

Bootstrap Navbar折叠下拉菜单

回答

相关问题