汉堡切换按钮不起作用是bootstrap
我使用HTML CSS和Bootstrap在Localhost上和Local主机上制作了标头，但Toggle按钮正常工作，但是当我在WordPress上按此代码时，切换按钮停止工作。我竭尽所能使它起作用。我尝试了许多订单中的CDN，还将jQuery CDN放在Bootstrap CDN之前，但没有任何可用。我还做出了所有必要的更改，例如将数据目标转换为数据-BS-target，但什么也不会发生。我还遵循了这篇文章 bootstrap 4 ，但对我不起作用。这是代码....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
li {
color: rgb(108, 108, 189);
}
.color {
color: #EE0000;
}
.bg-color {
background-color: #ed5353;
}
.navbar .navbar-brand img {
background-color: #212529;
}
#login:hover {
background-color: #EE0000;
}
a.nav-item:hover {
background-color: #EE0000;
border-radius: 4px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-center">
<a class="navbar-brand text-light mx-5" href="#"><img src="https://ablore.com/wp-content/uploads/2022/05/logo.png" style="width: 150px; background-color: #212529;" alt=""></a>
<span class="justify-content-center text-light d-inline d-md-inline d-lg-none" style="margin: auto;"><i
class="fa-solid fa-globe fs-4"></i>
English
<button class="btn btn-dark mx-4 justify-content-center from-center d-inline d-md-inline d-lg-none" id="login"
type="submit">Login</button></span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active text-light" href="#">Home <span class="sr-only">(current)</span></a>
<div class="dropdown show">
<a class=" dropdown-toggle nav-item nav-link text-light" style="text-decoration: none;" href="#collapseExample" data-bs-toggle="collapse">
Services
</a>
</div>
</div>
<a class="nav-item nav-link text-light from-center" href="#">Portfolio</a>
<a class="nav-item nav-link text-light" href="#">Insights</a>
<div class="container d-flex" style="justify-content: end;">
<span class=" text-light d-none d-md-none d-lg-inline"><i class="fa-solid fa-globe fs-5"></i>
English
<button class="btn btn-dark mx-4 d-none d-md-none d-lg-inline" id="login" type="submit">Login</button></span>
</div>
</div>
</nav>
<div class="collapse position-absolute" id="collapseExample">
<div class="card card-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> BRANDING
<hr>
</span>
<ul>
<li>Logo Design</li>
<li>Website Design</li>
<li>E-commerce Graphics</li>
<li>Social Media Graphics</li>
<li>Ads Graphics</li>
<li>Video Ads</li>
<li>Company Profile Design</li>
<li>Content Writing</li>
</ul>
</div>
<div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> PRODUCT DEVELOPMENT
<hr>
</span>
<ul>
<li>SaaS Development</li>
<li>Web Portal Development</li>
<li>E-commerce Development</li>
<li>Mobile Application Development</li>
</ul>
</div>
<div class="col-md-2 col-sm-6"> <span class="fs-5 fw-bold"> SALES
<hr>
</span>
<ul>
<li>Sales Process Development</li>
<li>Automated Sales Process</li>
<li>Sales Team</li>
<li>Tele Caller</li>
<li>Customer Support Team</li>
<li>Sales Software</li>
</ul>
</div>
<div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> MARKETING
<hr>
</span>
<ul>
<li>Social Media Management</li>
<li>Paid Media Management</li>
<li>Email Marketing</li>
<li>Content Marketing</li>
<li>Search Engine Optimization</li>
<li>Bulk SMS Marketing</li>
<li>Bulk WhatsApp Marketing</li>
<li>Automated Calls</li>
</ul>
</div>
<div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> CLOUDS
<hr>
</span>
<ul>
<li>Development Servers</li>
<li>Shared CPU</li>
<li>Dedicated CPU</li>
<li>Intel Servers</li>
<li>AMD Servers</li>
</ul>
</div>
<div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> IT INFRASTRUCTURE
<hr>
</span>
<ul>
<li>DevOps Engineer</li>
<li>IT Support</li>
<li>Product Development</li>
<li>Project Infrastructure</li>
<li>Product Architecture</li>
</ul>
</div>
<div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> ERP SOFTWARE
<hr>
</span></div>
<div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> CRM SOFTWARE
<hr>
</span></div>
<div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> REMOTE SOFTWARE
<hr>
</span></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您有很多无效的HTML和不正确的引导程序Navbar属性，元素。
按钮与span在英语和登录菜单中。这是无效的HTML。data-tog> data-toggle =“ >在Bootstrap 5中使用 等等。那么，您真的想使用哪个版本？
在WordPress上，这不可能在您的本地主机上工作。它们都应该被打破，因为您使用不正确的CSS和JS或HTML属性（包括类）。
快速修复
以快速修复，我使用正确的Bootstrap CSS＆amp; JS版本（v.5），而且工作正常。
在
当您进行编码时，请始终注意您正在使用的哪个版本，而不仅仅是将它们混合，也不是从任何地方复制和粘贴。
保持专注，仅坚持使用您使用的版本。
You have a lot of invalid HTML and incorrect Bootstrap Navbar attributes, elements.
buttonwith inspanfor English and Login menu. This is invalid HTML.data-toggle="collapse"while in Bootstrap 5 usedata-bs-toggle="collapse"and more.So, which version do you really want to use?
It is not possible that this will work on your localhost while on WordPress is broken. They both should be broken because you use incorrect version of CSS and JS or HTML attributes including classes.
Quick fix
For quick fix, I use the correct Bootstrap CSS & JS version (v.5) and it's just working fine.
See it in action on jsfiddle.
When you are coding, always note that which version you are using and don't just mixed them nor copy and paste from anywhere.
Stay focus, stick only to the version you use.