Question

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  </head>

  <body data-spy="scroll" data-target="#my-navbar">

    <!--Start of the navbar section-->
    <nav id="my-navbar" class="navbar navbar-default navbar-fixed-top">
      <div class="container">

        <div class="navbar-header">      
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="glyphicon glyphicon-align-justify"></span>
          </button>

          <div class="navbar-brand">Lorem Ipsum</div>
        </div>

        <div id="navbar-collapse" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Lorem Ipsum</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!--End of the navbar section-->
  </body>
</html>

代码工作正常，我已经通读了bootstrap手册，并没有看到我的类名中的任何错误，但是当我将浏览器窗口折叠到手机视图时，按钮似乎不起作用，它没有不按预期下拉导航栏。

Answer 1

有一个缺少的身体标签，我用div替换它并且工作正常。您的代码按预期运行：http://www.codeply.com/go/dWnwMpejAH

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  </head>
<body>   <!-- changed here -->
  <div data-spy="scroll" data-target="#my-navbar">

    <!--Start of the navbar section-->
    <nav id="my-navbar" class="navbar navbar-default navbar-fixed-top">
      <div class="container">

        <div class="navbar-header">      
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="glyphicon glyphicon-align-justify"></span>
          </button>

          <div class="navbar-brand">Lorem Ipsum</div>
        </div>

        <div id="navbar-collapse" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Lorem Ipsum</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!--End of the navbar section-->
  </div>
 </body>

Answer 2

您忘了添加viewport meta。请在<head>标记中添加：

<meta name="viewport" content="width=device-width, initial-scale=1" />

是的，你忘记添加bootstrap-responsive.css：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-responsive.css.min.css" />

工作输出：http://output.jsbin.com/gelobacoxi

Answer 3

根据boostrap get started 文档，您需要在<head>代码中添加以下内容：

<!-- jQuery library -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <!-- Latest compiled and minified JavaScript -->
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

为什么我的Bootstrap折叠导航栏不起作用？

3 个答案: