Bootstrap dropdown sub menu missing

后端 未结 7 1197
再見小時候
再見小時候 2020-11-22 04:09

Bootstrap 3 is still at RC, but I was just trying to implement it. I couldn\'t figure out how to put a sub menu class. Even there is no class in css and even the new docs do

7条回答
  •  梦如初夏
    2020-11-22 04:42

    Updated 2018

    The dropdown-submenu has been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto..

    "Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342

    But, with a little extra CSS you can get the same functionality.

    Bootstrap 4 (navbar submenu on hover)

    .navbar-nav li:hover > ul.dropdown-menu {
        display: block;
    }
    .dropdown-submenu {
        position:relative;
    }
    .dropdown-submenu>.dropdown-menu {
        top:0;
        left:100%;
        margin-top:-6px;
    }
    

    Navbar submenu dropdown hover
    Navbar submenu dropdown hover (right aligned)
    Navbar submenu dropdown click (right aligned)
    Navbar dropdown hover (no submenu)


    Bootstrap 3

    Here is an example that uses 3.0 RC 1: http://bootply.com/71520

    Here is an example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684

    CSS

    .dropdown-submenu {
        position:relative;
    }
    .dropdown-submenu>.dropdown-menu {
        top:0;
        left:100%;
        margin-top:-6px;
        margin-left:-1px;
        -webkit-border-radius:0 6px 6px 6px;
        -moz-border-radius:0 6px 6px 6px;
        border-radius:0 6px 6px 6px;
    }
    .dropdown-submenu:hover>.dropdown-menu {
        display:block;
    }
    .dropdown-submenu>a:after {
        display:block;
        content:" ";
        float:right;
        width:0;
        height:0;
        border-color:transparent;
        border-style:solid;
        border-width:5px 0 5px 5px;
        border-left-color:#cccccc;
        margin-top:5px;
        margin-right:-10px;
    }
    .dropdown-submenu:hover>a:after {
        border-left-color:#ffffff;
    }
    .dropdown-submenu.pull-left {
        float:none;
    }
    .dropdown-submenu.pull-left>.dropdown-menu {
        left:-100%;
        margin-left:10px;
        -webkit-border-radius:6px 0 6px 6px;
        -moz-border-radius:6px 0 6px 6px;
        border-radius:6px 0 6px 6px;
    }
    

    Sample Markup

    
    

    P.S. - Example in navbar that adjusts left position: http://bootply.com/92442

提交回复
热议问题