twitter-bootstrap Bootstrap 4 - 更改断点导航栏？

Bootstrap 4 - Change breakpoint navbar?

提问by Piet

This question was already asked herebut this don't work because of the Javascript. So in the provided answer only the CSS was changed but not the JS, which means the content of the nav bar is still visible while the toggler is not. Any solution?

这里已经问过这个问题，但由于 Javascript，这不起作用。因此，在提供的答案中，仅更改了 CSS 而未更改 JS，这意味着导航栏的内容仍然可见，而切换器不可见。有什么解决办法吗？

Edit:

编辑：

My question is how to change the breakpoint of the nav bar in Bootstrap 4.xx

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

回答by Zim

You can change the Bootstrap 4 navbar breakpoint using the navbar-toggleable-*classes. Use the hidden-*utility classes to show/hide the toggle button.

您可以使用这些navbar-toggleable-*类更改 Bootstrap 4 导航栏断点。使用hidden-*实用程序类来显示/隐藏切换按钮。

Bootstrap 4 Navbar Breakpoints Demo

Bootstrap 4 Navbar Breakpoints Demo

---

---

Update for Bootstrap 4.0.0Bootstrap 4.0.0 更新

Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-*classes. If you exclude navbar-expand-*the mobile menu will be used at allwidths. Here's a demo of all 6 navbar states: Bootstrap 4 - Navbar Tiers

在 Bootstrap 4 中使用这些navbar-expand-*类更容易更改导航栏断点。如果您排除navbar-expand-*移动菜单将用于all宽度。这是所有 6 种导航栏状态的演示：Bootstrap 4 - Navbar Tiers

Also see: Change bootstrap navbar collapse breakpoint without using LESS

另请参阅：在 不使用 LESS 的情况下更改引导程序导航栏折叠断点

回答by user1744669

Bootstrap provide an easy way to work with menus. You can use navbar-expand-xl, navbar-expand-lg, navbar-expand-mdetc according to your needs. Thanks

Bootstrap 提供了一种使用菜单的简单方法。您可以使用navbar-expand-xl，navbar-expand-lg，navbar-expand-md等根据您的需要。谢谢

回答by user10867411

I override the .navbar-expand-lg in native CSS.

我覆盖了原生 CSS 中的 .navbar-expand-lg。

Here is the example code:

这是示例代码：

    @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;
  }}

回答by Spotlightsrule

(Bootstrap 4 Beta compliant) If you want to have customized breakpoints, you can use this snippet from my own site. I copied one of the defined breakpoints and modified it to fit my needs. I had issues with the menu not being inline with the brand, but I fixed that by overriding the flex-wrap option. To implement, simply add to another CSS file or inline. Code:

（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;}}