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>
阅读 4k
1 个回答

你的

<button class = "navbar-toggle" data-toggle = "collapse">

缺少 data-target="#example-navbar-collapse"

意思是你点击这个button后要展开/收起哪个导航条,仔细看bootstrap文档不难发现这个问题。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题