使用引导程序在顶部导航构建中的子菜单不会崩溃 [英] Sub menus in top navigation build using bootstrap does not collapse
本文介绍了使用引导程序在顶部导航构建中的子菜单不会崩溃的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
我创建了一个带有Navbar Header的顶部导航，4个主要链接，一个带有下拉子菜单和插入符号。
下拉子菜单没有崩溃。我试图找到问题，但找不到它。请参阅以下代码段。
Hi Guys,
I have created a top navigation with a Navbar Header, 4 main links one with a drop down submenu and the caret.
The drop down submenu is not collapsing. I have tried to find the issue but couldn't find it. Please refer the below code snippet.
<!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>Bootstrap with HTML</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navbar with Dropdown Menus -->
<!-- Start Navbar Top -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Toggle buttons snippet - This will define the toggle buttons of the navigation when the screen gets smaller -->
<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>
<!-- End of Toggle button snippet -->
<!-- The Site Name or Brand name snippet -->
<a class="navbar-brand" href="www.youtube.com" target="_blank">The Bootstrap Site with HTML</a>
<!-- End of brand name snippet -->
<!-- The below defines the navigation links in the Navbar. From this point you can create the links for the navigation -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li ><a href="#">Home</a></li>
<li ><a href="#">Technologies</a></li>
<li ><a href="#">Partners</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="drop-down">Products </a>
<ul class="dropdown-menu">
<li><a href="#">SaaS</a></li>
<li><a href="#">PaaS</a></li>
<li><a href="#">Cloud</a></li>
<li><a href="#">IofT</a></li>
</ul>
</li>
</ul>
</div>
<!--End of the navigation links in the Navbar -->
</div>
</nav>
<!-- End of Navbar Top -->
</body>
</html>
我有什么试过：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatible content =IE = edge>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
<！ - 以上3个元标记*必须*首先出现在头部;任何其他头部内容必须* *这些标签之后*>
< title>带HTML的引导程序< / title>
<！ - Bootstrap - >
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min .cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous>
<！ - jQuery（Bootstrap的JavaScript插件必备） - >
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js>< / script> ;
<！ - 包括所有已编译的插件（下方），或根据需要包含单个文件 - >
< script src =https：// maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\"></script>
<！ - HTML5 shim和Respond.js，用于IE8支持HTML5元素和媒体查询 - >
<！ - WA RNING：如果您通过文件查看页面，则Respond.js不起作用：// - >
<！ - [if lt IE 9]>
< script src =https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js>< / script>
< script src = https://oss.maxcdn.com/respond/1.4.2/respond.min.js\"></script>
<！[endif] - >
< / head>
< body>
<！ - 带下拉菜单的Navbar - >
<！ - 开始Navbar Top - >
What I have tried:
<!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>Bootstrap with HTML</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navbar with Dropdown Menus -->
<!-- Start Navbar Top -->
<！ - 切换按钮片段 - 当屏幕变小时，这将定义导航的切换按钮 - >
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>
切换导航
< / button>
<！ - 切换结束按钮snippet - >
<！ - 网站名称或品牌名称代码段 - >
带有HTML的Bootstrap站点
<！ - 品牌名称片尾 - >
<！ - 以下定义导航栏中的导航链接。从这一点开始，您可以创建导航链接 - >
<!-- Toggle buttons snippet - This will define the toggle buttons of the navigation when the screen gets smaller -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Toggle navigation
</button>
<!-- End of Toggle button snippet -->
<!-- The Site Name or Brand name snippet -->
The Bootstrap Site with HTML
<!-- End of brand name snippet -->
<!-- The below defines the navigation links in the Navbar. From this point you can create the links for the navigation -->
<！ - 导航栏中的导航链接结束 - >
<!--End of the navigation links in the Navbar -->
<！ - 导航栏结束 - >
< / body>
< / html>
<!-- End of Navbar Top -->
</body>
</html>
推荐答案
我在这里得到了解决方案。我在上使用过帖子Stackoverflow
I got the solution here it is. I have used the post on Stackoverflow
<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>Bootstrap with HTML</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="custom/custom.css" rel="stylesheet" type="text\css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Adding a web font -->
<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css />-->
</head>
<body>
<!-- Navbar with Dropdown Menus -->
<!-- Start Navbar Top -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Toggle buttons snippet - This will define the toggle buttons of the navigation when the screen gets smaller -->
<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>
<!-- End of Toggle button snippet -->
<!-- The Site Name or Brand name snippet -->
<a class="navbar-brand" href="www.youtube.com" target="_blank">The Bootstrap Site with HTML</a>
<!-- End of brand name snippet -->
<!-- The below defines the navigation links in the Navbar. From this point you can create the links for the navigation -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a>
</li>
<li><a href="#">Technologies</a>
</li>
<li><a href="#">Partners</a>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Products </a>
<ul class="dropdown-menu">
<li><a href="#">SaaS</a>
</li>
<li><a href="#">PaaS</a>
</li>
<li><a href="#">Cloud</a>
</li>
<li><a href="#">IofT</a>
</li>
</ul>
</li>
</ul>
</div>
<!--End of the navigation links in the Navbar -->
</div>
</nav>
<!-- End of Navbar Top -->
<!--- -->
<!-- Bootstrap container & container-fluid -->
<!-- Bootstrap container example -->
<div class="container bootcontainer">
<h1>Hello, world! - Using Container</h1>
</div>
<!-- Bootstrap container-fluid example -->
<div class="container-fluid bootcontainerfluid">
<h1>Hello, world! - Using Container Fluid</h1>
</div>
<!-- End of Bootstrap container and container-fluid-->
<!--- -->
<!--- -->
<!-- Bootstrap columns and rows -->
<!-- Bootstrap columns example -->
<div class="container">
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- End of Bootstrap columns & rows -->
<!--- -->
</body>
</html></link><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>Bootstrap with HTML</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Font Awesome inclusion for the icons on the pages -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text\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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="custom/custom.css" rel="stylesheet" type="text\css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Adding a web font -->
<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css />-->
</head>
<body>
<!-- Navbar with Dropdown Menus -->
<!-- Start Navbar Top -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Toggle buttons snippet - This will define the toggle buttons of the navigation when the screen gets smaller -->
<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>
<!-- End of Toggle button snippet -->
<!-- The Site Name or Brand name snippet -->
<a class="navbar-brand" href="www.youtube.com" target="_blank">The Bootstrap Site with HTML</a>
<!-- End of brand name snippet -->
<!-- The below defines the navigation links in the Navbar. From this point you can create the links for the navigation -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a>
</li>
<li><a href="#">Technologies</a>
</li>
<li><a href="#">Partners</a>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Products </a>
<ul class="dropdown-menu">
<li><a href="#">SaaS</a>
</li>
<li><a href="#">PaaS</a>
</li>
<li><a href="#">Cloud</a>
</li>
<li><a href="#">IofT</a>
</li>
</ul>
</li>
</ul>
</div>
<!--End of the navigation links in the Navbar -->
</div>
</nav>
<!-- End of Navbar Top -->
<!--- -->
<!--- -->
<!-- Bootstrap Page Header -->
<div class="page-header">
<h3>This is a page header</h3>
</div>
<!-- End of Bootstrap Page Header -->
<!--- -->
<!--- -->
<!-- Bootstrap Jumbotron example -->
<div class="container">
<div class="jumbotron text-center">
<h1>This is a Jumbotron in Bootstrap! </h1>
<p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
</p>
</div>
</div>
<!-- End of Jumbotron -->
<!--- -->
<!--- -->
<!-- Bootstrap button example -->
<div class="container">
<h4>Bootstrap Buttons</h4>
<!-- The Large size buttons -->
<p>
<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-success btn-lg">Success</button>
<button type="button" class="btn btn-info btn-lg">Info</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-danger btn-lg">Danger</button>
<button type="button" class="btn btn-link btn-lg">Link</button>
</p>
<!-- The default size buttons -->
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-sm">Default</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>
<button type="button" class="btn btn-link btn-sm">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-xs">Default</button>
<button type="button" class="btn btn-primary btn-xs">Primary</button>
<button type="button" class="btn btn-success btn-xs">Success</button>
<button type="button" class="btn btn-info btn-xs">Info</button>
<button type="button" class="btn btn-warning btn-xs">Warning</button>
<button type="button" class="btn btn-danger btn-xs">Danger</button>
<button type="button" class="btn btn-link btn-xs">Link</button>
</p>
</div>
<!-- End of Bootstrap button example -->
<!--- -->
<!--- -->
<!-- Bootstrap container & container-fluid -->
<!-- Bootstrap container example -->
<div class="container bootcontainer">
<h1>Hello, world! - Using Container</h1>
</div>
<!-- Bootstrap container-fluid example -->
<div class="container-fluid bootcontainerfluid">
<h1>Hello, world! - Using Container Fluid</h1>
</div>
<!-- End of Bootstrap container and container-fluid-->
<!--- -->
<br />
<!--- -->
<!-- Bootstrap columns and rows -->
<!-- Bootstrap columns example -->
<div class="container">
<div class="row">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<img src="images/CSharp_Logo.png" alt="CSharp Logo" />
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<img src="images/HTML5_Logo.png" alt="HTML5 Logo" />
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<img src="images/Python_Logo.png" alt="Python Logo" />
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- End of Bootstrap columns & rows -->
<!--- -->
<!--- -->
<!-- Bootstrap Responsive Thumbnail & Image -->
<!-- Bootstrap Thumbnail & image example -->
<a href="#" class="thumbnail">
<img src="images/CSharp_Logo.png" alt="CSharp Logo" />
</a>
<!-- End of Bootstrap Thumbnail & Image -->
<!--- -->
<!--- -->
<!-- Bootstrap Footer -->
<!-- Bootstrap Footer example -->
<div class="navbar navbar-inverse navbar-bottom">
<div class="container">
<!-- Copyright section -->
<div class="navbar-text pull-left">
<p>Copyright ScriptDojo® 2016</p>
</div>
<!-- End of copyright section -->
<!-- Facebook icon section -->
<div class="navbar-text pull-right">
<p>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</p>
</div>
<!-- End of Facebook section -->
</div>
</div>
<!-- End of Bootstrap Footer -->
<!--- -->
</body>
</html></link>这篇关于使用引导程序在顶部导航构建中的子菜单不会崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
