如何在 991 像素宽的平板电脑上强制 Bootstrap 中的汉堡菜单？

Question

在网站上 https://weightlosspillsreviews.com 我在平板设备上以 991 像素或更小的视口宽度显示时遇到问题。问题是菜单项在该视口断点处换行，我想在该断点处切换到汉堡菜单。

当我尝试通过将关联的媒体查询放入我的 style.css 文件并将它们设置为 991px 来覆盖其断点设置为 767px 的 bootstrap.css 时，整个顶部导航菜单消失了而不是切换到汉堡菜单。

以下是我放入style.css并调整的样式：

@media (max-width: 991px) {
    .hidden-xs {
        display: none!important;
    }
    .navbar .navbar-inverse .visible-xs {
        display: block!important;
    }
}

但是当出现该代码时，整个菜单就会消失。

我在这里错过了什么？

Answer 1

在您的情况下，该网站使用 bootstrap 3.3.7。在 bootstrap 的更高版本中，这可以通过 class 简单地更新。如果需要，您可以继续更新 bootstrap 版本。

更快的解决方案是下载自定义 bootstrap 样式。转到此 link 自定义您的 CSS：https://getbootstrap.com/docs/3.4/customize/

在网格系统部分将 @grid-float-breakpoint 更新为您希望导航栏折叠的宽度。

如何在 991 像素宽的平板电脑上强制 Bootstrap 中的汉堡菜单？

How can I force the hamburger menu in Bootstrap on tablets at 991px wide?

html

css

twitter-bootstrap

responsiveness