关于导航按钮在其他尺寸下显示问题

关于导航按钮在其他尺寸下显示问题
1.
Bootstrap第4177行
@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}
修改为
@media (min-width: 992px) {
  .navbar-header {
    float: left;
  }
}
2.
Bootstrap第4194行
@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}
修改为
media (min-width: 992px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}
3.
Bootstrap第4318行
@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}
修改为
@media (min-width: 992px) {
  .navbar-toggle {
    display: none;
  }
}

posted @ 2017-09-01 13:36  南瓜壳  阅读(162)  评论(0编辑  收藏  举报