Bootstrap 以特定宽度折叠/切换引导程序导航栏

xggvc2p6 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(186)

我正在使用引导程序导航栏，希望它以880 px宽度切换/折叠。我尝试添加880 px宽度的媒体查询，但没有成功。这是我的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

来源：https://stackoverflow.com/questions/44360680/collapse-toggle-bootstrap-navbar-at-specific-width

1条答案

按热度按时间

ou6hu8tu1#

我发现这个，因为我正在寻找同样的解决方案。
针对引导程序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的链接

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 以特定宽度折叠/切换引导程序导航栏

1条答案

相关问题

热门标签

最新问答