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

【问题标题】：Making Navigation bar in bootstrap still responsive使引导程序中的导航栏仍然响应
【发布时间】：2017-01-07 14:59:54
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

一旦你有正确的宽度，在你的 CSS 中编写一个媒体查询，如下所示：

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

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

【讨论】：

【解决方案2】：

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

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

当您的窗口调整宽度为 768 像素时，切换菜单出现。

【讨论】：