Collapse/Toggle Bootstrap 特定宽度的导航栏

Question

我正在使用 Bootstrap 导航栏并希望它 toggle/collapse 宽度为 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;
 }
}

Answer 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)。如果您想阅读全文，请点击 link https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

Collapse/Toggle Bootstrap 特定宽度的导航栏

Collapse/Toggle Bootstrap navbar at specific width

toggle

collapse

navbar

twitter-bootstrap