码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-09-01 14:31:19      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:header   imp   尺寸   otto   toggle   nbsp   web   media   ble   

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

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

标签:header   imp   尺寸   otto   toggle   nbsp   web   media   ble   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!