使引导程序中的导航栏仍然响应

Question

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

但是，如果我缩小窗口大小，我可以看到像这样的折叠按钮

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

Answer 1

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

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

一旦你有正确的宽度，你就可以在CSS中写一个媒体查询：

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

在这种情况下，WIDTH将是Google Chrome提供的像素宽度（即＆＃39; 600px＆＃39;或其他）。确保＆＃39; main-nav＆＃39;和＆＃39; small-nav＆＃39;重命名以反映您的两个导航的类名。

Answer 2

您必须像下面一样添加媒体css调整大小宽度，并减少元素的填充。

@media screen and (max-width: 992px) {
    .nav > li > a {
        display: block;
        padding: 10px 7px;
        position: relative;
    }
}

当您的窗口调整宽度768px时，切换菜单。