菜单在引导程序中折叠时删除类
[英]Removing a class when the menu is collapsed in bootstrap
问题描述
导航栏展开时，我必须添加一个.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>
这是一个小提琴： https : //jsfiddle.net/3pnb1byp/3/
2 个解决方案
解决方案1
2 已采纳 2018-04-01 19:25:07
Bootstrap 3导航栏断点位于991px，因此您可以使用媒体查询来更改折叠的导航栏。
@media screen and (max-width: 991px) {
.bgGradient {
background-color: transparent;
box-shadow: none;
}
.bgGradient2 {
background-color: transparent;
box-shadow: none;
}
}
解决方案2
0 2018-04-01 20:27:26
当您使用navbar-expand-md时，导航栏中的类会使该Navbar在中等（md）断点992px处垂直折叠（并显示切换图标 ）。 但是由于某种原因， 您的断点实际上适用于小于768px的屏幕宽度 。
并摆脱梯度 。 您可以使用具有min-width的媒体查询，以便您的渐变类仅在最小宽度断点之前有效。 而且你不需要 添加额外的CSS。
在检查CSS部分的下面，我将媒体查询的最小宽度设置为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>
Bootstrap：在MENU外部单击时如何关闭打开的折叠导航栏？
[英]Bootstrap: How to close an open collapsed navbar when clicking outside of the MENU?
在iPhone上打开折叠菜单时，引导程序导航栏品牌会拉伸
[英]bootstrap navbar-brand stretches when collapsed menu is opened on iphone
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.