jquery - 使 Bootstrap 中的导航栏仍然响应

Question

我正在为我的 UI 使用 Bootstrap 框架。我使用相同的框架制作了一个导航栏。当我减小屏幕尺寸时，我得到了这个输出

不过，如果我减小窗口大小，我会看到这样的折叠按钮

。如果我缩小窗口，我不想看到图像缩小窗口中的那个。相反，如果我减小了窗口大小，是否可以在没有缩小窗口阶段的情况下看到折叠按钮？

Answer 1

一个选项是您可能想尝试测量窗口的宽度，并在它从主导航过渡到折叠导航时记录像素宽度。

您可以通过 Google Chrome 中的控制台执行此操作:

一旦你有了正确的宽度，就可以像这样在你的 CSS 中写一个媒体查询:

 @media (max-width: WIDTH) {
   .main-nav {
    display: none;
  }
  .small-nav {
  display: visible
 }
}

在这种情况下，WIDTH 将是 Google Chrome 提供的像素宽度(即“600px”或其他)。确保重命名“main-nav”和“small-nav”以反射(reflect)两个导航的类名。