Question

我正在使用Bootstrap导航栏并希望它以880px的宽度切换/折叠。我尝试添加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写你的自定义大小（880像素）。如果您想阅读全文，请点击此链接 https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

折叠/切换特定宽度的Bootstrap导航栏

1 个答案: