Bootstrap 4 - 更改断点navbar？

Question

此问题已被要求here，但由于Javascript而无法使用。所以在提供的答案中，只有CSS被更改，但不是JS，这意味着导航栏的内容仍然可见，而触发器不是。任何解决方案

编辑：

我的问题是如何改变导航栏的断点引导4.XX

Answer 1

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

Bootstrap 4 Navbar Breakpoints Demo

---

更新引导4.0.0

更改导航栏断点是引导4易于使用navbar-expand-*类。如果排除navbar-expand-*，则将使用手机菜单，宽度为all。以下是所有6个导航状态的演示：Bootstrap 4 - Navbar Tiers

Answer 2

（Bootstrap 4 Beta compliant）如果您想定制断点，您可以使用我自己的网站中的这个片段。我复制了一个定义的断点，并对其进行了修改以适应我的需要。我遇到了与菜单内联的菜单问题，但我通过覆盖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;}}