Twitter bootstrap 引导-更改断点导航栏?

Twitter bootstrap 引导-更改断点导航栏?,twitter-bootstrap,bootstrap-4,breakpoints,nav,bootstrap-5,Twitter Bootstrap,Bootstrap 4,Breakpoints,Nav,Bootstrap 5,这个问题已经被问到了,但是由于Javascript的原因,这个问题不起作用。因此,在提供的答案中,只更改了CSS,而没有更改JS,这意味着导航栏的内容仍然可见,而切换器不可见。有解决办法吗 编辑: 我的问题是如何更改Bootstrap4.xx中导航栏的断点 引导程序5仍然使用navbar expand*类来确定navbar的折叠断点。现在有一个额外的导航栏扩展xxl类 引导4.0.0 在Bootstrap4中,使用导航栏扩展-*类更容易更改导航栏断点。如果您排除navbar expand-*移

这个问题已经被问到了,但是由于Javascript的原因,这个问题不起作用。因此,在提供的答案中,只更改了CSS,而没有更改JS,这意味着导航栏的内容仍然可见,而切换器不可见。有解决办法吗

编辑:


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

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

引导4.0.0

在Bootstrap4中,使用
导航栏扩展-*
类更容易更改导航栏断点。如果您排除
navbar expand-*
移动菜单将在
所有宽度处使用。下面是所有6个导航栏状态的演示:

另见:

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

引导提供了一种使用菜单的简单方法。您可以根据需要使用
导航栏扩展xl
导航栏扩展lg
导航栏扩展md
等。
谢谢

我在本机CSS中覆盖了.navbar扩展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;
  }}

另一个问题是当导航栏折叠时垂直堆叠项目,而不是导航栏折叠断点。谢谢你的回答,这就完成了。我必须为以下类更正CSS:“.navbar nav.navbar togleable xs.collapse”。