html - bootstrap导航栏下拉问题
本文介绍了html - bootstrap导航栏下拉问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
下面代码是用bootstrap写的，为什么在小屏下点击菜单按钮无法显示下拉？
<!DOCTYPE html>
<html>
<head>
<title>bootstrap</title>
<meta charset = "utf-8">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class = "navbar navbar-default " role="navigation">
<div class="navbar-header ">
<a class="navbar-brand " href="#">菜鸟教程</a>
<button class = "navbar-toggle" data-toggle = "collapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
</div>
<div class = "collapse navbar-collapse" id="example-navbar-collapse">
<ul class = "nav navbar-nav ">
<li ><a href = "#">bootstrap</a></li>
<li ><a href = "#">bootstrap</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">bootstrap <span class = "caret"></span></a>
<ul class = "dropdown-menu">
<li><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class = "container">
</div>
</body>
</html>解决方案
你的
<button class = "navbar-toggle" data-toggle = "collapse">缺少 data-target="#example-navbar-collapse"
意思是你点击这个button后要展开/收起哪个导航条，仔细看bootstrap文档不难发现这个问题。
这篇关于html - bootstrap导航栏下拉问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
