当导航栏展开时，我必须添加一个 .bgGradient 类，因为客户想要在导航栏中显示图像，并且文本不容易辨认。所以我在导航栏后面添加了一个轻微的渐变。但当它折叠起来时，渐变看起来很奇怪，所以我想摆脱它。
有没有办法仅在导航栏折叠时摆脱 .bgGradient 类？
.navbar {
margin: -30px 0 15px 0;
}
.navbar ul {
display: flex;
justify-content: space-around;
}
.navbar .nav-item .nav-link {
color: #FFF;
font-family: "Helvetica," sans-serif;
font-weight: 600;
font-size: 14px;
display: inline-flex;
padding: 0px;
}
.bgGradient {
background-color: rgba(54, 203, 216, 0.8);
box-shadow: 0px 0px 8px 5px #36CBD8;
}
.bgGradient2 {
background-color: rgba(16, 188, 185, 0.5);
box-shadow: 0px 0px 10px 5px #10BCB9;
}
.navbar-dark .navbar-nav .nav-link {
color: white;
}
.custom-toggler.navbar-toggler {
border-color: rgb(255, 255, 255, 0.5);
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="sticky-top">
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarSupportedContent">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
BOOKS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="brandingsutra">Branding Sutra</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
LEARNING LAB
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Workshops</a>
<a class="dropdown-item" href="#">Podcast</a>
<a class="dropdown-item" href="#">Classes</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bgGradient2" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
SERVICES
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Coaching</a>
<a class="dropdown-item" href="#">Mindfulness</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bgGradient" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
FREEBIES
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Challenge</a>
<a class="dropdown-item" href="#">DIY Copywriting</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bgGradient" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Merry Carole</a>
<a class="dropdown-item" href="#">Branding Powers</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>这是一个 fiddle :https://jsfiddle.net/3pnb1byp/3/
最佳答案
Bootstrap 3 导航栏断点位于 991 像素，因此您可以使用媒体查询来更改折叠的导航栏。
@media screen and (max-width: 991px) {
.bgGradient {
background-color: transparent;
box-shadow: none;
}
.bgGradient2 {
background-color: transparent;
box-shadow: none;
}
}
关于jquery - 当菜单在 Bootstrap 中折叠时删除类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49601769/