Bootstrap＆gt;隐藏下拉项目＆amp;根据媒体查询保持最小的Navbar

Question

问题：在移动设备上加载Bootstrap网站时，由于nav-collapse媒体查询CSS，菜单消失了。我想要的是保留一个没有下拉项目的简约菜单。这可能吗？

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

Answer 1

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

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

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

这比添加另一个语义更好的菜单更好。

Answer 2

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

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

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