scss CSS - Bootstrap Burger覆盖更快取消隐藏
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss CSS - Bootstrap Burger覆盖更快取消隐藏相关的知识,希望对你有一定的参考价值。
@media (min-width: 768px) and (max-width: 892px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
/*margin: 7.5px -15px;*/
margin: 7.5px 50px 7.5px -15px
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
// Burger Overrides
// ----------------------------------
@media (min-width: 768px) and (max-width: 892px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
> li {
line-height: 20px;
}
> a {
line-height: 20px;
}
.dropdown-header {
padding: 5px 15px 5px 25px;
> li {
> a {
padding: 5px 15px 5px 25px;
}
}
}
}
.dropdown-menu {
> li {
> a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
}
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none !important;
margin: 7.5px 50px 7.5px -15px;
> li {
float: none;
> a {
padding-top: 10px;
padding-bottom: 10px;
}
}
}
.navbar-text {
float: none;
margin: 15px 0;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.collapsing {
overflow: hidden !important;
}
}
以上是关于scss CSS - Bootstrap Burger覆盖更快取消隐藏的主要内容,如果未能解决你的问题,请参考以下文章
scss 使用Animate.css的Bootstrap模态
scss CSS - Bootstrap Burger覆盖更快取消隐藏
scss Bootstrap Pure CSS自定义单选按钮/复选框
css https://github.com/ofca/dc-template/blob/master/assets/scss/vendor/dc-bootstrap.scss#L21-L53的示例
如何使用 react webpack 设置 bootstrap 4 scss
从 Nuxt.js 与 PhpStorm 中的节点模块解析 SCSS 中的 @import .css