即时启动bootstrap，我一直在关注一些教程。我最近遇到了下拉菜单，但我似乎无法得到它。我已经搜索了我是否正确引用了bootstrap的答案，但看起来我认为它是正确的。
有人可以帮忙吗？
由于
这是我的代码：
<!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">
<link rel="stylesheet" type="text/css" href="style.css">"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<title>Bootstrap 101 Template</title>
</head>
<body>
<div class= "header">
<h1>Hello, world!</h1>
</div>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="drop down">
Cool Button<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
</div>
<hr>
<div class = "container3">
<div class = "row">
<div class"row">
<div class="well">
<a href=""class="btn">button</a>
<a href=""class="btn btn-primary">button</a>
<a href=""class="btn btn-success">button</a>
<a href=""class="btn btn-info">button</a>
<a href=""class="btn btn-warning">button</a>
<a href=""class="btn btn-danger">button</a>
<hr>
<a href="" class="btn btn-lg btn-success">Gift Your Friends<br><span class ="glyphicon glyphicon-gift" ></span></a>
</div>
</div>
</div>
</div>
<div class ="container">
<form action="">
<div class="form-group">
<label for="element 1">This is the text of the label</label>
<input type="text" id="element-1" class="form-control">
</div>
<div class="form-group">
<label for="element 1">This is the text of the label 2</label>
<input type="text" id="element-1" class="form-control">
</div>
<p class="help-block">Enter your password with Capital letters and Numbers included</p>
</form>
<hr>
<form action="" class ="form-inline">
<div class="form-group">
<label for="element 3"></label>
<input type="text" id="element-3" class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="element 4"></label>
<input type="password" id="element-4" class="form-control" placeholder="Enter Password">
</div>
<div class="checkbox"></div>
<a href="" class ="btn btn-info">Sign In</a>
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
<div class= "header">
<h1>Hello, world!</h1>
</div>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="drop down">
Cool Button<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">1ool</a></li>
<li><a href="">2ool</a></li>
<li><a href="">3ool</a></li>
<li><a href="">4ool</a></li>
</ul>
</div>
</div>
<hr>
<div class = "container3">
<div class = "row">
<div class"row">
<div class="well">
<a href=""class="btn">button</a>
<a href=""class="btn btn-primary">button</a>
<a href=""class="btn btn-success">button</a>
<a href=""class="btn btn-info">button</a>
<a href=""class="btn btn-warning">button</a>
<a href=""class="btn btn-danger">button</a>
<hr>
<a href="" class="btn btn-lg btn-success">Gift Your Friends<br><span class ="glyphicon glyphicon-gift" ></span></a>
</div>
</div>
</div>
</div>
<div class ="container">
<form action="">
<div class="form-group">
<label for="element 1">This is the text of the label</label>
<input type="text" id="element-1" class="form-control">
</div>
<div class="form-group">
<label for="element 1">This is the text of the label 2</label>
<input type="text" id="element-1" class="form-control">
</div>
<p class="help-block">Enter your password with Capital letters and Numbers included</p>
</form>
<hr>
<form action="" class ="form-inline">
<div class="form-group">
<label for="element 3"></label>
<input type="text" id="element-3" class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="element 4"></label>
<input type="password" id="element-4" class="form-control" placeholder="Enter Password">
</div>
<div class="checkbox"></div>
<a href="" class ="btn btn-info">Sign In</a>
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分：0)
drop down之间有空格。它应该是data-toggle="dropdown"
此外，一旦加载了DOM，就必须在元素上调用dropdown()。
添加此项以实例化下拉列表。这应该有用。
$(document).ready(function(){
$('.dropdown-toggle').dropdown();
})
<!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">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<title>Bootstrap 101 Template</title>
</head>
<body>
<div class= "header">
<h1>Hello, world!</h1>
</div>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Cool Button<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
</div>
<hr>
<div class = "container3">
<div class = "row">
<div class"row">
<div class="well">
<a href=""class="btn">button</a>
<a href=""class="btn btn-primary">button</a>
<a href=""class="btn btn-success">button</a>
<a href=""class="btn btn-info">button</a>
<a href=""class="btn btn-warning">button</a>
<a href=""class="btn btn-danger">button</a>
<hr>
<a href="" class="btn btn-lg btn-success">Gift Your Friends<br><span class ="glyphicon glyphicon-gift" ></span></a>
</div>
</div>
</div>
</div>
<div class ="container">
<form action="">
<div class="form-group">
<label for="element 1">This is the text of the label</label>
<input type="text" id="element-1" class="form-control">
</div>
<div class="form-group">
<label for="element 1">This is the text of the label 2</label>
<input type="text" id="element-1" class="form-control">
</div>
<p class="help-block">Enter your password with Capital letters and Numbers included</p>
</form>
<hr>
<form action="" class ="form-inline">
<div class="form-group">
<label for="element 3"></label>
<input type="text" id="element-3" class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="element 4"></label>
<input type="password" id="element-4" class="form-control" placeholder="Enter Password">
</div>
<div class="checkbox"></div>
<a href="" class ="btn btn-info">Sign In</a>
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
/* Instantiate the dropdown once DOM loaded.*/
<script>
$(document).ready(function(){
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>