10

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

编辑：

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

4

4 回答 4

16

引导程序 5.0

Bootstrap 5 仍然使用navbar-expand*类来确定导航栏的折叠断点。现在有一个额外的 navbar-expand-xxl 类。

Bootstrap 5 - 导航栏层

引导程序 4.0.0

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

另请参阅： 更改引导导航栏折叠断点而不使用 LESS

于 2016-04-04T15:05:16.730 回答
7

在此处输入图像描述

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

于 2018-04-12T05:25:20.067 回答
1

我覆盖了原生 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;
  }}
于 2019-01-04T12:17:16.447 回答
1

（与 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;}}
于 2017-08-20T19:29:01.397 回答