【问题标题】:Twitter Bootstrap 2.1.0 Submenu Looks Messy on ResponsiveTwitter Bootstrap 2.1.0 子菜单在响应式上看起来很乱
【发布时间】:2012-09-10 17:22:12
【问题描述】:

我正在使用 Twitter Bootstrap 2.1.x 并且已经能够使用我在这里申请的多级子菜单: Simple Multilevel Menu With Bootstrap 2.1.x.

但是当它崩溃时问题就出现了。 默认视图是全部展开。这看起来不太好,因为菜单会覆盖 iPhone 上的整个屏幕。

我想知道:折叠菜单按钮触发时有什么功能可以全部折叠吗? (当用户点击它时,子菜单应该是打开的。)

请告诉我您对此的看法。 谢谢。

【问题讨论】:

    标签: javascript jquery twitter-bootstrap


    【解决方案1】:

    一种方法是添加一些响应式样式。

    @media (max-width: 979px){
        .dropdown-submenu .dropdown-menu{
            display: none;
        }
    }
    

    这可确保您的子菜单在折叠模式下隐藏。 如果您将鼠标悬停(或在 Bootstrap 2.1 中单击)它们将通过基本的引导下拉菜单样式和 js 显示。

    在这里你可以找到Demo - jsfiddle (BT 2.0.2)

    【讨论】:

    • 嗨...您的演示有效..我尝试在我的 html 中添加 css,为什么它不起作用?任何想法..请检查doxadigital.com/scrape/multilevelmenu.php ...同样在手机/平板电脑中可能没有悬停事件,点击事件是否取代了您解决方案中的悬停事件?
    • 我猜你的新样式会被css/bootstrap-responsive.min.css 覆盖。尝试在 css/bootstrap-responsive.min.css 包含之后包含 @media (max-width: 979px) 部分。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-11-14
    • 2021-07-09
    • 2013-12-20
    • 2015-01-27
    • 2013-06-24
    相关资源
    最近更新 更多