Bootstrap 3自定义多级菜单无法处理较小的分辨率

时间:2014-02-16 11:20:12

标签: jquery css twitter-bootstrap menu responsive-design

我正在使用Bootstrap 3来创建我们与自定义CMS一起使用的HTML模板。 您可以在此处找到演示HTML页面: http://clienti.stefanoginella.com/loreal/pagina-prodotto.html

我使用“hack”http://www.bootply.com/92442和YAMM http://geedmo.github.io/yamm/

创建了一个多级自定义子菜单(点击PRODOTTI,你会看到它)

有一些自定义JS可以让它在这里工作http://clienti.stefanoginella.com/loreal/js/loreal.js 从第71行开始,最后一部分。

在“桌面”模式下,它可以完美运行。 但是,如果您缩小浏览器的尺寸,当菜单折叠到移动版本时,它就不再起作用了。

我试过的是这个(没有一个作为解决方案)

  • 删除两个导航栏中的一个
  • 删除YAMM css
  • 删除自定义JS

折叠的菜单仍无效。 它会在几分之一秒后自动关闭。

您是否知道为何会发生这种情况以及如何解决?

非常感谢

斯特凡诺

1 个答案:

答案 0 :(得分:1)

loreal.css中的第166行导致了问题 - 如果您使用Web检查器对其进行注释,则菜单会正确显示/隐藏。

.navbar-collapse.collapse { display:none !important; }

如果您希望移动导航更早启动,您需要在bootstrap css中找到正确的媒体查询并调整其宽度值,或者复制出您需要的所有位并将其放入您自己的CSS中(它看起来像你已经尝试过了,但还是没有完全掌握它!)。