个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 01:19:24 25 4
gpt4 key购买 nike 

<!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 手册，在我的类名中没有看到任何错误，但是当我将浏览器窗口折叠到手机 View 时，按钮似乎不起作用而且它不起作用' 按预期下拉导航栏。

最佳答案

缺少 body 标签，我用 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>

关于html - 为什么我的 Bootstrap 折叠导航栏不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34402596/

25 4 0
文章推荐： c++ - 当 ios::sync_with_stdio(0) 和 cin.tie(0) 写在循环内时奇怪行为的解释
文章推荐： c++ - 运算符 '...' 具有覆盖说明符但不覆盖基类成员
文章推荐： javascript - 如何将数组转换为N叉树？
文章推荐： c++ - 如何声明和初始化特定大小 vector 的二维数组？