我似乎无法让下拉和切换按钮工作。 我知道很多人都遇到过这个问题,但我还没有找到解决方案。
<!DOCTYPE HTML>
<HTML>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">PRECISE</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Tweet</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrp.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</HTML>
将以下代码添加到您的 CSS 中,它将使下拉菜单工作:-
.dropdown:hover .dropdown-menu {
display: block;
color:#*any*;
}.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.dropdown:hover .dropdown-toggle{
background-color: #*any*;
color:#*any*;
}
并在您的html页面中进行以下修改:-
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu" role = "menu" area-labelledby = "dLabel">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</li>
</ul>
</div>
发生这种情况是因为折叠类overflow
设置为 hidden
。然而,将overflow
设置为visible
就破产了。解决方案是在切换栏可见时强制实施height
属性。您必须设置这样的height
,以便所有下拉列表都可见。在这种情况下,设置100px
就足够了。还需要添加!important
。
.collapse.in {
height: 100px !important;
}
确保正确导入引导.js:
<script src="js/bootstrp.js"></script>
看起来您错过了单词"bootstrap"中的字母"a"。
希望这有帮助。