无论如何在bootstrap中以992px的屏幕大小显示导航栏汉堡包？

Question

我想在md（992px）屏幕上显示bootstrap navbar Hamburger。以下是我的代码。

我该怎么办？

Answer 1

尝试更改＆＃34; collapse＆＃34;的行为或＆＃34; navbar-collapse＆＃34;类。虽然它不推荐，因为它们是bootstrap类。 你应该在CSS代码中遇到@media命令，指定你想要的像素。 希望它有所帮助！

Answer 2

默认情况下，导航会在992px处折叠。将其覆盖到您想要折叠的任何大小。但是，最好自定义Bootstrap的源代码，但我不确定是否存在navbar-collapse的特定断点变量。

我从Bootstrap.css复制了这段代码。您需要将它放在自定义CSS中。

@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

Answer 3

在<nav class="navbar navbar-expand-sm navbar-expand-md navbar-dark">中为md设备添加一个类navbar-expand-md。现在它会起作用。