mobile - 在手机上隐藏 Bootstrap 子菜单

Question

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

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

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

Answer 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 :-)
}