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

本文介绍了切换按钮折叠在Bootstrap导航栏中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

导航栏折叠时，我的切换按钮不起作用.我已经多次检查了数据目标，看起来还可以.

这是我的代码:

<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>

有人知道问题出在哪里，我该如何解决?

解决方案

当然，您的切换按钮会根据您的屏幕分辨率而有所不同.尝试以下方法:

    <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文件，并在出现切换按钮时设置屏幕大小的属性.在您更改这些属性或将浏览器窗口的大小调整得越来越小之前，切换按钮可能不会出现在桌面上.

例如.在我的浏览器窗口中最大化显示，切换按钮没有出现.但是，如果您将浏览器窗口的大小调整为一半(或者正在手机上浏览)，它将看起来像这样

要解决此问题，您需要进入CSS设置.但这仅在您要更改它的情况下.否则，它将正常工作.

My toggle button is not working when the navbar collapses. I have checked the data-target several times and looks ok.

Here is my code:

<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>

Does anybody know what the problem is and how I can fix it?

解决方案

Of course your toggle button will differ based on your screen resolution. Try something along the lines of:

    <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>

Try this out on your mobile and see. Afterwards go into your css file and set the properties for screen size on WHEN should the toggle button appear to be.The toggle button might not appear on the desktop until you change these properties, or resize your browser window smaller, and smaller until the toggle button appears.

Eg. Maximized on my browser window, the toggle button doesn't appear.However if you resize your browser window by half(or if you're surfing on a phone), it'll look like this

To fix this you'll need to go into your css settings. But this is ONLY if you want to change it. Otherwise it'll work fine.

这篇关于切换按钮折叠在Bootstrap导航栏中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！