在手机上隐藏 Bootstrap 子菜单

【问题标题】：Hide Bootstrap sub menus on mobiles在手机上隐藏 Bootstrap 子菜单
【发布时间】：2013-07-11 12:51:48
【问题描述】：

我正在使用 nav walker 在 Wordpress 中使用引导程序启用下拉菜单，并且一切正常。我想弄清楚有没有办法禁用手机上的下拉菜单，也许是使用媒体查询？

我想这样做的原因是因为有很多页面和一些链接位于第三层，它们飞离了移动屏幕。无论如何，顶级导航都有指向子菜单项的链接，因此在手机中我只想显示顶级项，并禁止显示子菜单。

我也没有使用带有图标的导航折叠，因为我不想在这个项目中使用它。

【问题讨论】：

【解决方案1】：

是的，它可以通过媒体查询来完成。这个针对移动设备：

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
    .navigation {display:none;}
}

当然，现在您必须留意屏幕的尺寸。另一种解决方案是使用 JavaScript，并检查 userAgent：

if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android|BlackBerry|webOS|Windows Phone)/i)) {
    // I'm a mobile :-)
}

【讨论】：

非常感谢 Eric，使用你的 sn-p 它起作用了，我使用了：@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) { ul.nav li.dropdown：悬停 ul.dropdown-menu{ 显示：无； } }