Question

我正在使用引导程序样式表。

以下代码适用于我的导航面板。这在我的桌面浏览器上工作正常，但是当我减小浏览器大小或在移动设备上测试时，会出现汉堡菜单，但不会展开以按预期显示导航内容。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>

<body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand color-me" href="#home">Home</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about-me">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="##">Page 1</a></li>
          <li><a href="##">Page 2</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
    <!-- container -->
  </nav>

我在HTML中遗漏了什么？我不明白问题在哪里！

Answer 1

请包含此行并且可以使用。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

你错过了javascript库，因此事件没有响应，

Answer 2

似乎你错过了包含bootstrap js文件。请检查https://getbootstrap.com/docs/3.3/getting-started/

Answer 3

我猜想使用bootstrap.min.js来解决问题直到您除非在bootstrap @ 3中不包含jquery才能解决问题

还请包含以下链接或通过javascript的dist文件夹获取

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

Bootstrap汉堡导航菜单无法在移动浏览器中打开

3 个答案: