html - 为什么导航栏折叠对我使用 Bootstrap 不起作用?
问题描述
我在使用Bootstrap时遇到问题,导航栏折叠按钮不起作用我尝试了所有可能的方法,并按照我正在观看的教程中提到的每个步骤进行操作。如何在不更改注册和登录按钮的情况下让它为我工作?请帮我。
这是我的html代码:
body{
background-color: #F7F7F7;
font-family: Montserrat-Medium;
}
ul{
list-style-type:none;
}
.navbar-brand{
color: black;
font-family: Montserrat-Medium;
margin-left: 150px;
text-align: center;
}
.nav-brand-text{
}
.nav-signup{
background-color: #5E99EF;
color: white;
border: none;
padding: 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin-top: 4px;
border-radius: 46px;
}
.nav-signup:hover{
background-color: #4E83CF;
color: #EAEAEA;
}
.nav-login{
border: 5px solid black;
border-color: #5E99EF;
color: #5E99EF;
padding: 11px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin-top: 4px;
border-radius: 46px;
white-space: nowrap;
}
.nav-login:hover{
color: #4E83CF;
background-color: #EAEAEA;
}
.nav-items-row{
margin-right: 150px;
}
<body>
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-light bg-white shadow-sm p-4 mb-5">
<div class="container-fluid">
<div class="nav-header">
<button type="button" class="navbar-toggler position-absolute start-1" data-toggle="collapse" data-target=".navbar-submenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-md">
<a class="navbar-brand" href="#">
<img src="res/logo.png" width="40" height="40" class="" alt=""></img><b> Tbadel.ma</b>
</a>
</div>
</div>
<div class="collapse navbar-collapse navbar-submenu">
<ul class="nav nav-items-row position-absolute end-0">
<ul class="col-md">
<li><a href="#" class="nav-signup">S'identifier</a></li>
</ul>
<ul class="col-md">
<li><a href="#" class="nav-login">Se connecter</a></li>
</ul>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
解决方案
在 bootstrap5 中,标签有一些变化,例如:data-toggle
change todata-bs-toggle
和data-target
todata-bs-target
因此,当使用div 的data-bs-target
目标id
而不是类时。
body{
background-color: #F7F7F7;
font-family: Montserrat-Medium;
}
ul{
list-style-type:none;
}
.navbar-brand{
color: black;
font-family: Montserrat-Medium;
margin-left: 150px;
text-align: center;
}
.nav-brand-text{
}
.navbar-toggler {
z-index: 1;
}
.nav-signup{
background-color: #5E99EF;
color: white;
border: none;
padding: 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin-top: 4px;
border-radius: 46px;
}
.nav-signup:hover{
background-color: #4E83CF;
color: #EAEAEA;
}
.nav-login{
border: 5px solid black;
border-color: #5E99EF;
color: #5E99EF;
padding: 11px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin-top: 4px;
border-radius: 46px;
white-space: nowrap;
}
.nav-login:hover{
color: #4E83CF;
background-color: #EAEAEA;
}
.nav-items-row{
margin-right: 150px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-light bg-white shadow-sm p-4 mb-5">
<div class="container-fluid">
<div class="nav-header">
<button type="button" class="navbar-toggler position-absolute start-1 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-submenu" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-md">
<a class="navbar-brand" href="#">
<img src="res/logo.png" width="40" height="40" class="" alt=""><b> Tbadel.ma</b>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-submenu">
<ul class="nav nav-items-row position-absolute end-0">
<ul class="col-md">
<li><a href="#" class="nav-signup">S'identifier</a></li>
</ul>
<ul class="col-md">
<li><a href="#" class="nav-login">Se connecter</a></li>
</ul>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
推荐阅读
- c# - 如何在opencv / emgucv中找到加号的交集?
- api - Magento2 Rest PUT API 返回默认存储而不是目标存储的有效负载
- xamarin - 在弹出菜单中,如何随换页改变图片来源
- android - 在安卓手机上持续采集用户位置
- php - 试图存储图像
- java - 在智能手机上使用 Dart (Flutter) 设置洋葱服务器
- macos - 空格键在 Mac 上的 Visual Studio Code 中工作异常
- python - 带有参数可选矩阵的 scipy.linalg.eigh 的 java 等效项
- javascript - 从更改事件更改复选框状态
- r - geom_boxplot 中不显示垂直线