Bootstrap 切换按钮折叠在引导程序导航栏中不起作用

svmlkihl 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(5)|浏览(202)

当导航栏折叠时，切换按钮不起作用。我已经检查了数据目标几次，看起来没问题。
下面是我的代码：

<div class="navbar navbar-fixed-top navbar-inverse">
 <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" href="index.html" title="The Title">
    <img style="max-width:100px;" src="images/LOGO-4.png">
  </a>

    <div class="collapse navbar-collapse navbar-collapse">
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#">WORK</a></li>
            <li><a href="#">CONTACT</a></li>

        </ul>
    </div>

有人知道问题出在哪里吗？我该怎么解决？

twitter-bootstrap

来源：https://stackoverflow.com/questions/26770164/toggle-button-collapse-not-working-in-bootstrap-navbar

5条答案

按热度按时间

pobjuy321#

当然，根据屏幕分辨率的不同，切换按钮也会有所不同。请尝试以下方法：

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

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

     </head>
<body >

<nav class="navbar navbar-inverse">
<div class="container-fluid">

 <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html" title="The Title">
    <img style="max-width:100px;" src="images/LOGO-4.png">
  </a>
</div>

    <div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#">WORK</a></li>
            <li><a href="#">CONTACT</a></li>

        </ul>
    </div>
    </div>
    </nav>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </body>
</html>

在你的移动的上试试看。然后进入你的css文件，在WHEN上设置屏幕大小的属性，切换按钮应该出现。切换按钮可能不会出现在桌面上，直到你改变这些属性，或者把浏览器窗口调整得越来越小，直到切换按钮出现。
例如，在我的浏览器窗口最大化时，切换按钮没有出现。

然而，如果你将浏览器窗口大小调整为一半（或者如果你在手机上冲浪），它看起来就像

要解决这个问题，你需要进入你的css设置。但这是只有当你想改变它。否则它会工作正常。

赞(0）回复(0）举报 2022-12-07

3z6pesqy2#

看到你有正确的导入库，我有一个同样的问题，我不知道为什么有时它有奇怪的行为与不同版本的Jquery
试试这个

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

赞(0）回复(0）举报 2022-12-07

mbzjlibv3#

每次我们都面临着这个问题“为什么导航栏切换按钮不工作？"，但这一次我们已经找到了解决方案，并特别感谢谷歌Chrome开发团队开发显示错误清楚.
我们应该在引导javascript文件之前包含jquery库文件。

赞(0）回复(0）举报 2022-12-07

7rtdyuoh4#

希望它会有帮助，因为我有同样的问题，并修复了它：

<body>

     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
         ...
     </nav>

     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>

</body>

赞(0）回复(0）举报 2022-12-07

sd2nnvve5#

默认导航栏-需要JavaScript插件
如果禁用JavaScript并且视区足够窄，导航栏会折叠，则无法展开导航栏并查看.navbar-collapse中的内容。
响应导航栏要求在您的Bootstrap版本中包含折叠插件

赞(0）回复(0）举报 2022-12-07