首页 > 其他 > 详细

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

时间:2017-09-01 14:05:41      阅读:225      评论:0      收藏:0      [点我收藏+]

关于导航按钮在其他尺寸下显示问题
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;
  }
}

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

原文:http://www.cnblogs.com/wangshengli520/p/7462831.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!