无论如何在引导程序中以 992px 的屏幕尺寸显示导航栏汉堡包？ [复制]答案

【问题标题】：Is there anyway in bootstrap to show navbar hamburger at 992px screen size? [duplicate]无论如何在引导程序中以 992px 的屏幕尺寸显示导航栏汉堡包？ [复制]
【发布时间】：2018-11-19 14:18:49
【问题描述】：

我想在 md(992px) 屏幕上显示引导导航栏汉堡包。下面是我的代码。

我该怎么办？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

尝试改变“collapse”或“navbar-collapse”类的行为。虽然不推荐，因为这些是引导类。您应该在 CSS 代码中遇到 @media 命令，在那里指定您想要的像素。希望对您有所帮助！

【讨论】：

【解决方案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;
  }
}

【讨论】：

【解决方案3】：

在 <nav class="navbar navbar-expand-sm navbar-expand-md navbar-dark"> 中为 md 设备再添加一个类 navbar-expand-md。现在它可以工作了。

【讨论】：