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

Posted 2023-03-06

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

【英文标题】：Is there anyway in bootstrap to show navbar hamburger at 992px screen size? [duplicate]

【发布时间】：2018-11-19 14:18:49

【问题描述】：

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

我该怎么办？

【参考方案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。现在它可以工作了。