缺少引导下拉子菜单

引导程序5（更新2021）

添加一些JavaScript以防止在父下拉列表打开时关闭子菜单。这可以通过切换display:block

let dropdowns=document.querySelectorAll（“.dropdown toggle”）
下拉列表。forEach（（dd）=&gt{
dd.addEventListener（'click'，函数（e）{
var el=this.nextElementSibling
el.style.display=el.style.display=='block'？'none'：'block'
})
})

Bootstrap 5多级下拉菜单-单击
引导5多级下拉菜单-悬停

或者，您可以对导航栏下拉列表使用此仅CSS的方法

。下拉子菜单{
位置：相对位置；
}
.下拉子菜单.下拉菜单{
排名：0；
左：100%；
页边顶部：-1px；
}
.导航栏导航李：悬停&gt；下拉菜单{
显示：块；
}

引导5导航栏下拉悬停子菜单（仅CSS）

---

Bootstrap 4（2018年更新）

在Bootstrap 3 RC中，下拉子菜单已被删除。用Bootstrap作者MarkOtto的话来说

&引用；子菜单现在在网络上没有太多的位置，尤其是在移动网络上。它们将用3.0“删除”https://github.com/twbs/bootstrap/pull/6342

但是，使用一点额外的CSS，您可以获得相同的功能

悬停时的导航栏子菜单：

。导航栏导航方式：悬停&gt；下拉菜单{
显示：块；
}
.下拉子菜单{
位置：相对位置；
}
.下拉式子菜单&gt；。下拉菜单{
排名：0；
左：100%；
利润上限：-6px；
}

导航栏子菜单下拉悬停
导航栏子菜单下拉悬停（右对齐）
导航栏子菜单下拉式单击（右对齐）
导航栏下拉悬停（无子菜单）

---

引导3

下面是一个使用3.0 RC 1的示例：http://bootply.com/71520

下面是一个使用Bootstrap 3.0.0（最终版）的示例：http://bootply.com/86684

CSS

。下拉子菜单{
位置：相对位置；
}
.下拉式子菜单&gt；。下拉菜单{
排名：0；
左：100%；
利润上限：-6px；
左边距：-1px；
-webkit边界半径：0 6px 6px 6px；
-moz边界半径：0 6px 6px 6px；
边界半径：0 6px 6px 6px；
}
.下拉子菜单：悬停&gt；。下拉菜单{
显示：块；
}
.下拉式子菜单&gt；a:以后{
显示：块；
内容：“&quot；”；；
浮动：对；
宽度：0；
身高：0；
边框颜色：透明；
边框样式：实心；
边框宽度：5px 0 5px 5px；
左边框颜色：#中交；
边缘顶部：5px；
右边距：-10px；
}
.下拉子菜单：悬停&gt；a:以后{
左边框颜色：#ffffff；
}
.下拉式子菜单.向左拉{
浮动：无；
}
.下拉子菜单。向左拉&gt；。下拉菜单{
左-100%；
左边距：10px；
-webkit边界半径：6px 0 6px 6px；
-moz边界半径：6px 0 6px 6px；
边界半径：6px 0 6px 6px；
}

示例标记

&lt；div class=&quot；导航栏导航栏默认导航栏固定顶部；角色=&quot；导航“&燃气轮机；
&lt；div class=&quot；货柜&燃气轮机；
&lt；div class=&quot；导航栏标题“&燃气轮机；
&lt；按钮类型=&quot；按钮“；类别=“类”；导航栏切换；数据切换=&quot；“崩溃”；数据目标=&quot；。navbar-ex1-折叠“&燃气轮机；
&lt；span class=&quot；“仅限sr”&燃气轮机；切换导航&lt/span&gt；
&lt；span class=&quot；“图标栏”&燃气轮机&lt/span&gt；
&lt；span class=&quot；“图标栏”&燃气轮机&lt/span&gt；
&lt；span class=&quot；“图标栏”&燃气轮机&lt/span&gt；
&lt/按钮&gt；
&lt/部门&gt；
&lt；div class=&quot；折叠导航栏折叠导航栏-ex1-折叠“&燃气轮机；
&lt；保险商等级=”；导航导航栏导航“&燃气轮机；
&lt；li类=”；菜单项下拉菜单“&燃气轮机；
&lt；a href=&quot#&引用；类别=“类”；下拉开关；数据切换=&quot；下拉列表“&燃气轮机；下拉列表&lt；b类=”；插入符号“&燃气轮机&lt/b&gt&lt/a&gt；
&lt；保险商等级=”；下拉菜单&quot&燃气轮机；
&lt；li类=”；菜单项“下拉子菜单”&燃气轮机；
&lt；a href=&quot#&引用；类别=“类”；下拉开关；数据切换=&quot；下拉列表“&燃气轮机；一级&lt/a&gt；
&lt；保险商等级=”；下拉菜单&quot&燃气轮机；
&lt；li类=”；菜单项&quot&燃气轮机；
&lt；a href=&quot#&引用&燃气轮机；链接1&lt/a&gt；
&lt/李&gt；
&lt；li类=”；菜单项“下拉子菜单”&燃气轮机；
&lt；a href=&quot#&引用；类别=“类”；下拉开关；数据切换=&quot；下拉列表“&燃气轮机；二级&lt/a&gt；
&lt；保险商等级=”；下拉菜单&quot&燃气轮机；
&lt；李&gt；
&lt；a href=&quot#&引用&燃气轮机；链接3&lt/a&gt；
&lt/李&gt；
&lt/ul&gt；
&lt/李&gt；
&lt/ul&gt；
&lt/李&gt；
&lt/ul&gt；
&lt/李&gt；
&lt/ul&gt；
&lt/部门&gt；
&lt/部门&gt；
&lt/部门&gt；

p.S.-导航栏中调整左侧位置的示例：http://bootply.com/92442