Question

我有这个代码，我尝试制作一个黑色条纹和白色背景的汉堡包引导菜单。但我似乎并没有那么做。接下来，我的汉堡包引导程序菜单以移动格式打开，但不会再次关闭。我已经上网寻求解决方案，但没有任何作用。代码：https://jsfiddle.net/u0fm0trs/

<head>
    <title>Makelaardij Jos Bloemendal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/mystyles.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/Footer-with-map.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container-fluid">
            <nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="background-color: white; border: none;"> 
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" 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>
                </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div id="navbar"> 
            <ul class="nav navbar-nav navbar-left">
                    <img src="img/logo checklist 3.jpg">
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li id="Home"><a href="index.html"><p>Home</p></a></li>
                            <li id="Woningen" class="dropdown">
                              <a href="Woningen.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><p>Woningen</p></a>
                              <ul class="dropdown-menu">
                                <li><a href="Woningen.html"><p>Alle</p></a></li>
                                <li><a href="Almelo.html"><p>Almelo</p></a></li>
                                <li><a href="Den Ham OV.html"><p>Den Ham OV</p></a></li>
                                <li><a href="Enter.html"><p>Enter</p></a></li>
                                <li><a href="Hardenberg.html"><p>Hardenberg</p></a></li>
                                <li><a href="Hellendoorn.html"><p>Hellendoorn</p></a></li>
                                <li><a href="Nijverdal.html"><p>Nijverdal</p></a></li>
                                <li><a href="Rijssen.html"><p>Rijssen</p></a></li>
                                <li><a href="Vriezenveen.html"><p>Vriezenveen</p></a></li>
                                <li><a href="Vroomshoop.html"><p>Vroomshoop</p></a></li>
                                <li><a href="Wierden.html"><p>Wierden</p></a></li>
                                <li><a href="Overige.html"><p>Overige</p></a></li>
                              </ul>
                            </li>
                    <li id="Agrarisch"><a href="Agrarisch.html"><p>Agrarisch</p></a></li>
                    <li id="Bedrijven"><a href="Bedrijven.html"><p>Bedrijven</p></a></li> 
                    <li id="Recreatie"><a href="Recreatie.html"><p>Recreatie</p></a></li>
                    <li id="Bosgrond"><a href="Bosgrond.html"><p>Bosgrond</p></a></li>
                    <li id="Contact"><a href="#myFooter"><p>Contact</p></a></li>
                </ul> 
            </div>
            </div>
            </nav>

Answer 1

小提琴中的Bootstrap版本太多了。只需使用一个。

切换按钮未显示，因为您使用的是具有白条的navbar-inverse。将其更改为navbar-default ..

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="background-color: white; border: none;">
...
</nav>

http://www.bootply.com/GIbsIiwP6E

Answer 2

尝试添加到您的跨度上方的按钮中：

aria-expanded="false"

它＆＃34;表示可折叠元素的状态＆＃34;。

我也不明白为什么你有一个额外的div，你给了id =＆＃34; navbar＆＃34;你的ul上面有与navbar相关的类。也许这会导致一些问题？

Bootstrap navbar汉堡包菜单不起作用

2 个答案: