Bootstrap下拉子菜单丢失 [英] Bootstrap dropdown sub menu missing
问题描述
Bootstrap 3仍在RC中,但是我只是在尝试实现它.我不知道如何放置一个子菜单类.甚至CSS中都没有类,甚至新文档也没有说什么
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 don't say anything about it
在2.x中存在,类名称为dropdown-submenu
It was there in 2.x with class name as dropdown-submenu
推荐答案
已更新2018年
Updated 2018
dropdown-submenu
已在Bootstrap 3 RC中删除.用Bootstrap作者Mark Otto的话来说.
The dropdown-submenu
has been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto..
子菜单现在在网络上没有什么位置,特别是在移动网络上.它们将在3.0中被删除."-但是,仅需一些额外的CSS,您就能获得相同的功能.
But, with a little extra CSS you can get the same functionality.
Bootstrap 4 (鼠标悬停时导航栏子菜单)
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)引导程序3
以下是使用3.0 RC 1的示例: http://bootply.com/71520
Here is an example that uses 3.0 RC 1: http://bootply.com/71520以下是使用Bootstrap 3.0.0(最终版)的示例: http://bootply.com/86684
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; }
示例标记
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="menu-item dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a> <ul class="dropdown-menu"> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a> <ul class="dropdown-menu"> <li class="menu-item "> <a href="#">Link 1</a> </li> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a> <ul class="dropdown-menu"> <li> <a href="#">Link 3</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div>
P.S. -导航栏中的示例可调整左侧位置: http://bootply.com/92442
P.S. - Example in navbar that adjusts left position: http://bootply.com/92442
这篇关于Bootstrap下拉子菜单丢失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!