javascript - Bootstrap > 隐藏下拉项并根据媒体查询保持最小的导航栏

Question

问题：在移动设备上加载 Bootstrap 站点时，菜单会因为 nav-collapse media-query CSS 而消失。我想要的是保留一个没有下拉项目的简约菜单。那可能吗？

如果我要添加另一个仅具有顶级 <li> 的简单导航栏，我如何应用媒体查询来执行 If-Else 以根据屏幕尺寸选择合适的导航栏？

score 2 · Accepted Answer

使用 Bootstrap 响应式，菜单的媒体查询是

@media (max-width: 979px) { }

您可以首先删除.nav-collapse此媒体查询中的所有样式（因此无论浏览器宽度如何，您都拥有相同的菜单），然后重新修改样式以实现您想要的。如果我没记错的话，这些样式在 650 行左右。

这比添加另一个菜单更好，这在语义上很差。

score 0 · Accepted Answer

@media (max-width: 768px) {
 .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
   display: none;
 }
}

这将隐藏小于 768 像素的屏幕的下拉菜单。

通过悬停时打开其他代码下拉菜单（而不是单击），当媒体查询隐藏菜单项时，我可以使用单击重定向到页面。

2 回答 2