在手機上隱藏Bootstrap子菜單

Question

我正在使用nav walker在WordPress中使用bootstrap啓用下拉菜單，並且它一切正常。我想弄清楚的是，有什麼方法可以禁用手機上的下拉菜單，也許使用媒體查詢？

我想這樣做的原因是因爲有很多頁面，並且一些鏈接位於第三層，它從手機屏幕上飛過。無論如何，頂級導航都會鏈接到子菜單項，所以在手機中，我只想顯示頂級項目，並禁用子菜單顯示。

此外，我不使用導航崩潰的圖標，因爲我不想在這個項目上使用它。

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