scss 991px上的Bootstrap 3移动菜单

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 991px上的Bootstrap 3移动菜单相关的知识,希望对你有一定的参考价值。

/* Мобильное меню*/


@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,.navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid $silver;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin: 0;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    //padding-top: 10px;
    //padding-bottom: 10px;
  }
  .collapse.in{
    display:block !important;
  }
}
/* Мобильное меню*/

.row--relative {
  position: relative;
}
.fixed-menu {
  position: fixed;
  top: 0px;
  background: $off-white;
  padding-top: 15px;
  z-index: 5;

  @include media(sm) {
    padding-top: 20px;
  }
}

以上是关于scss 991px上的Bootstrap 3移动菜单的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Bootstrap 4 和 Scss 将容器的宽度覆盖为 1440px 并使列同时响应

VUE-CLI3+PX2REM-LOADER+SCSS移动端自适应配置

Bootstrap 3 仅在移动视图上应用 CSS

CSS / Bootstrap - 字体大小未正确从计算机调整到移动设备:移动设备上的字体看起来很小

Bootstrap:移动显示上的列之间的差距

SASS 错误:不兼容的单位:“px”和“px*px”