折叠时Navbar不显示下拉列表 - Bootstrap 3

时间:2014-05-26 20:11:38

标签: css html5 twitter-bootstrap

我已经阅读了有关此问题的其他问题,但无法找到解决问题的答案。我已多次检查我的代码,但找不到错误。我是新手使用bootstrap,所以我可能会遗漏一些明显的东西。

<!DOCTYPE html>
<html>
  <head>
    <title>asdf</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="description" content"asdf" >
     <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="/stylesheets/style.css" media="screen">
  </head>
  <body>
    <!-- Navbar -->
    <div class="navbar navbar-default navbar-static-top">
        <div class="container">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand text-muted" href="#">ASDF</a>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">asdf</a></li>
                    <li><a href="#">asdf</a></li>
                    <li><a href="#">asdf</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End Navbar -->

  </body>
  <script></script>
  <!-- ******************************* -->
  <!--[if lt IE 9]>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
  <![endif]-->
  <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</html>

1 个答案:

答案 0 :(得分:2)

更改脚本顺序:

JsFiddle

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

然后

 <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>