引导程序导航栏折叠下拉菜单
Bootstrap Navbar Collapse Dropdown Menu
我正在开发一个引导网站,导航栏中有一个下拉框。导航栏处于折叠模式时。下拉菜单没有响应有人知道为什么会发生这种情况吗
该网站位于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>
下拉列表是打开和关闭的,但它被容器隐藏在视图之外。以下CSS应该修复这个问题:
.navbar-static-top .navbar-collapse.in {
overflow-y: visible; /* Bootstrap default is "auto" */
}
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- 如何将JSON转换为HTML下拉菜单
- jQuery子菜单在折叠时仍然显示下拉菜单
- 引导折叠侧边栏菜单到下拉菜单
- 引导程序导航栏折叠下拉菜单
- Bootstrap 3.2-显示所有屏幕尺寸的折叠导航-下拉菜单消失
- 如何使一个Bootstrap 3下拉菜单默认打开时,它是在一个折叠的导航条
- 启动下拉菜单在折叠时不可定位
- 可折叠面板和下拉菜单的动态定位
- 引导下拉菜单设置显示:当折叠时无
- 下拉菜单-要显示的类的Javascript:如果选项卡类打开或关闭,则为none(可折叠面板)
- 在angularjs spa应用程序中,引导下拉菜单不会折叠