这个问题在这里已经被提出,但由于Javascript的原因,该解决方案无法生效。 因此,提供的答案只更改了CSS而没有更改JS,这意味着当切换器不可见时,导航栏的内容仍然可见。 有什么解决办法吗?
编辑:
我的问题是如何更改Bootstrap 4.xx中导航栏的断点。
这个问题在这里已经被提出,但由于Javascript的原因,该解决方案无法生效。 因此,提供的答案只更改了CSS而没有更改JS,这意味着当切换器不可见时,导航栏的内容仍然可见。 有什么解决办法吗?
编辑:
我的问题是如何更改Bootstrap 4.xx中导航栏的断点。
Bootstrap 5.0
在Bootstrap 5中,仍然使用navbar-expand*
类来确定导航栏的折叠断点。现在新增了一个navbar-expand-xxl
类。
Bootstrap 4.0.0
在Bootstrap 4中,使用navbar-expand-*
类更容易改变导航栏的断点。如果不包括navbar-expand-*
,则在所有
宽度下都将使用移动菜单。以下是所有6个导航栏状态的演示:Bootstrap 4 - 导航栏分层
(符合Bootstrap 4 Beta标准) 如果您想要自定义断点,您可以使用我自己网站上的这个代码片段。我复制了其中一个定义的断点并修改以适应我的需求。我发现菜单与品牌不在同一行,但我通过覆盖flex-wrap选项来解决了这个问题。要实施,只需将其添加到另一个CSS文件或内联即可。代码:
@media (max-width:1070px){.navbar-expand-srset>.container,.navbar-expand-srset>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1071px){.navbar-expand-srset{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-srset .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-srset .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-srset .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-srset .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-srset>.container,.navbar-expand-srset>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-srset .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-srset .navbar-toggler{display:none}.navbar{flex-wrap:nowrap!important;-ms-flex-wrap:nowrap!important;}}
我在本地CSS中覆盖了 .navbar-expand-lg。
以下是示例代码:
@media (min-width: *desired break point here){
.navbar-expand-lg {
-ms-flex-flow: row nowrap !important;
flex-flow: row nowrap !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
.navbar-expand-lg .navbar-nav {
-ms-flex-direction: row !important;
flex-direction: row !important;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute !important;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important;
}
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
}
.navbar-expand-lg .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto !important;
flex-basis: auto !important;
}
.navbar-expand-lg .navbar-toggler {
display: none !important;
}}