gpt4 book ai didi

javascript - Bootstrap 导航栏汉堡菜单无法打开

转载 作者:太空狗 更新时间:2023-10-29 15:48:56 25 4
gpt4 key购买 nike

我正在使用来自 getbootstrap.com 的 Bootstrap 版本 3.3.5。我从他们的网站(https://getbootstrap.com/components/#navbar)复制了导航栏代码。我调整了这段代码,使其看起来像我想要的样子。这是它现在的样子:

<?php
/**
* Created by PhpStorm.
* User: Olivier
* Date: 2/10/2016
* Time: 10:41 AM
*/
?>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="dropdown" 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>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</nav>

我在这段代码中包含了 JQuery 和 Bootstrap 样式表:

<?php

/**
* Created by PhpStorm.
* User: Olivier
* Date: 2/10/2016
* Time: 10:30 AM
*/
?>
<html>
<head>
<title>EquiRent</title>
<!-- Latest compiled and minified JavaScript -->
<!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>-->

<!--
**Including bootstrap
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

导航栏看起来很好,一切正常,但只要我将页面设置得足够小,汉堡包菜单就会自动显示,然后我点击它,什么也没有发生。

我希望导航栏像在 https://getbootstrap.com/components/#navbar 上一样工作.因此,当我缩小窗口时,汉堡包菜单实际上会在您单击时执行某些操作。

最佳答案

您好,下面的代码应该是。

data-toggle="collapse" 而不是 data-toggle="dropdown"

关于javascript - Bootstrap 导航栏汉堡菜单无法打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35404356/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com