当导航栏被扩展时，我不得不添加一个类.bgGradient，因为客户端需要导航栏中的图像并且文本不易清晰。所以我在导航栏后面添加了一个小梯度。但是当它崩溃时，渐变看起来很怪异，所以我想摆脱它。
有没有办法在导航栏崩溃时摆脱类.bgGradient？
onPause() .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");
}
这是一个小提琴：https://jsfiddle.net/3pnb1byp/3/
答案 0 :(得分：2)
Bootstrap 3 导航栏断点为991px，因此您可以使用媒体查询来更改折叠的导航栏。
@media screen and (max-width: 991px) {
.bgGradient {
background-color: transparent;
box-shadow: none;
}
.bgGradient2 {
background-color: transparent;
box-shadow: none;
}
}
答案 1 :(得分：0)
当您使用 navbar-expand-md 时，导航中的类会使此Navbar在媒体上垂直折叠（并且显示切换图标） （md）断点为992px 。但出于某种原因，您的断点实际工作 屏幕宽度小于768px 。
让摆脱渐变。您可以使用媒体查询最小宽度，这样您的渐变类只会在最小宽度断点之前工作。而且不需要添加额外的CSS 。
下面检查CSS部分我用min-width设置媒体查询：768px所以当设备屏幕小于768px时，渐变类将无法工作。
.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;
}
@media only screen and (min-width:768px){
.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>