Bootstrap-更改断点导航栏？

Question

这个问题在这里已经被提出，但由于Javascript的原因，该解决方案无法生效。 因此，提供的答案只更改了CSS而没有更改JS，这意味着当切换器不可见时，导航栏的内容仍然可见。 有什么解决办法吗？

编辑：

我的问题是如何更改Bootstrap 4.xx中导航栏的断点。

- Piet

---

另一个问题是关于在导航栏折叠后将项目垂直堆叠，而不是导航栏折叠断点。 - Carol Skelly

Answer 1

Bootstrap 5.0

在Bootstrap 5中，仍然使用navbar-expand*类来确定导航栏的折叠断点。现在新增了一个navbar-expand-xxl类。

Bootstrap 5 - 导航栏分层

Bootstrap 4.0.0

在Bootstrap 4中，使用navbar-expand-*类更容易改变导航栏的断点。如果不包括navbar-expand-*，则在所有宽度下都将使用移动菜单。以下是所有6个导航栏状态的演示：Bootstrap 4 - 导航栏分层

另请参见： 无需使用LESS更改Bootstrap导航栏折叠断点

- Zim

---

谢谢你的回答，这解决了我的问题。我不得不纠正以下类的CSS：".navbar-nav .navbar-toggleable-xs.collapse"。 - Piet

Answer 2

Bootstrap 提供了一种简单的方式来处理菜单。您可以根据自己的需求使用 navbar-expand-xl, navbar-expand-lg, navbar-expand-md 等等。

谢谢。

- user1744669

Answer 3

(符合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;}}

- Spotlightsrule

Answer 4

我在本地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;
  }}

- user10867411