单击时，BootStrap导航栏折叠按钮不起作用

时间：2017-08-25 23:35:10

标签： twitter-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, initialscale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 


<style type="text/css">
	.my{
		background-color: #d3d3d3;
		border:solid grey;
	}
	
</style>

</head>
<body>

	<div class="navbar navbar-default"> 
		<div class="container">
			<div class="navbar-header">
				<a href="" class="navbar-brand">MB's Website</a>
				
				<button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>	
				
				</div>
  <!--The following div doesn't open in the drop down menu-->
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li><a href="">Home</a></li>
					<li><a href="">Services</a></li>
					<li><a href="">About</a></li>
					<li><a href="">Contact Us</a></li>					
				</ul>
				
			</div>	
		</div>

	</div>

	<h1>Hello, world!</h1>

	<div class="row">
		<div class="col-md-6 my">content</div>
		<div class="col-md-6 my">content</div>
	</div>

	<div><p> </p></div>

	 


	<div class="row">
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
	</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery-3.2.1.min."></script>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</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, initialscale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 


<style type="text/css">
	.my{
		background-color: #d3d3d3;
		border:solid grey;
	}
	
</style>

</head>
<body>

	<div class="navbar navbar-default"> 
		<div class="container">
			<div class="navbar-header">
				<a href="" class="navbar-brand">MB's Website</a>
				
				<button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>	
				</div>
			
   <!--The following div doesn't open in the drop down menu-->
			
      <div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li><a href="">Home</a></li>
					<li><a href="">Services</a></li>
					<li><a href="">About</a></li>
					<li><a href="">Contact Us</a></li>					
				</ul>
				
			</div>	
		</div>

	</div>

	<h1>Hello, world!</h1>

	<div class="row">
		<div class="col-md-6 my">content</div>
		<div class="col-md-6 my">content</div>
	</div>

	<div><p> </p></div>

	 


	<div class="row">
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
	</div>

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

三江源

1 个答案:

答案 0 :(得分：0)

使用bootstrap的正确版本文件。不要将版本混合在一起，这意味着如果您使用的是Bootstrap 3，请使用该版本的正确css js文件

＆＃13;
＆＃13; 
<!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, initialscale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<style type="text/css">
	.my{
		background-color: #d3d3d3;
		border:solid grey;
	}
	
</style>

</head>
<body>

	<div class="navbar navbar-default"> 
		<div class="container">
			<div class="navbar-header">
				<a href="" class="navbar-brand">MB's Website</a>
				
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>	
				</div>
			
   <!--The following div doesn't open in the drop down menu-->
			
      <div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li><a href="">Home</a></li>
					<li><a href="">Services</a></li>
					<li><a href="">About</a></li>
					<li><a href="">Contact Us</a></li>					
				</ul>
				
			</div>	
		</div>

	</div>

	<h1>Hello, world!</h1>

	<div class="row">
		<div class="col-md-6 my">content</div>
		<div class="col-md-6 my">content</div>
	</div>

	<div><p> </p></div>

	 


	<div class="row">
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
		<div class="col-md-1 my">content</div>
	</div>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题