折叠/切换特定宽度的引导导航栏答案

【问题标题】：Collapse/Toggle Bootstrap navbar at specific width折叠/切换特定宽度的引导导航栏
【发布时间】：2017-11-05 17:44:36
【问题描述】：

我正在使用 Bootstrap 导航栏，并希望它以 880 像素的宽度切换/折叠。我尝试为 880px 宽度添加媒体查询，但它不起作用。这是我的 CSS 代码：

@media (min-width: 880px) {
 .navbar-collapse {
  width: auto !important;
  border-top: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.navbar-collapse.collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0 !important;
  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 !important;
   padding-left: 0 !important;
 }
 .container > .navbar-header,
 .container-fluid > .navbar-header,
 .container > .navbar-collapse,
 .container-fluid > .navbar-collapse {
   margin-right: 0 !important;
   margin-left: 0 !important;
 }
}

【问题讨论】：

标签： twitter-bootstrap toggle navbar collapse

【解决方案1】：

我在寻找相同的解决方案时发现了这一点。

Bootstrap 3.1 更新

@media (max-width: 1200px) {
.navbar-header {
    float: none;
}
.navbar-left,.navbar-right {
    float: none !important;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    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-top: 7.5px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.collapse.in{
    display:block !important;
    }
}

这种定制效果很好。而不是 1200px 写入您的自定义大小（880px）。如果你想阅读全文这里是链接 https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

【讨论】：