篇首语：本文由编程笔记#小编为大家整理，主要介绍了[Bootstrap入门][组件-下拉菜单]相关的知识，希望对你有一定的参考价值。

[Bootstrap入门][组件-下拉菜单]

标签&＃xff08;空格分隔&＃xff09;&＃xff1a; 未分类

---

用于显示链接列表的可切换性&＃xff0c;有上下文的菜单。下拉菜单的 Javascript 插件让它具有了交互性。

实例

将下拉菜单触发按钮和下拉菜单都包裹在.dropdown里&＃xff0c;或者声明另一个position:relative的元素。然后加入组成菜单的html代码。

• tapindex&＃61;-1 代表TAP无法选中它。

<div class&＃61;"dropdown">
<button class&＃61;"btn btn-default dropdown-toggle" type&＃61;"button" id&＃61;"dropdownMenu1" data-toggle&＃61;"dropdown">
Dropdown
<span class&＃61;"caret">span>
button>
<ul class&＃61;"dropdown-menu" role&＃61;"menu" aria-labelledby&＃61;"dropdownMenu1">
<li role&＃61;"presentation"><a role&＃61;"menuitem" tabindex&＃61;"-1" href&＃61;"#">Actiona>li>
<li role&＃61;"presentation"><a role&＃61;"menuitem" tabindex&＃61;"-1" href&＃61;"#">Another actiona>li>
<li role&＃61;"presentation"><a role&＃61;"menuitem" tabindex&＃61;"-1" href&＃61;"#">Something else herea>li>
<li role&＃61;"presentation"><a role&＃61;"menuitem" tabindex&＃61;"-1" href&＃61;"#">Separated linka>li>
ul>
div>

对齐

默认情况下&＃xff0c;下拉菜单自动沿着父元素的上沿和左测被定位 100%宽度。为.dorpdown-menu添加.dropdown-menu-right类可以让菜单右对齐。

• 要记得对.dropdown那一块使用float:left。才能让下拉右对齐按钮&＃xff0c;而不是父元素。

<div class&＃61;"dropdown" style&＃61;" margin:2cm 4cm 3cm 4cm; float:left; ">
<button class&＃61;"btn btn-default dropdown-toggle " type&＃61;"button" id&＃61;&＃39;dropdownMenu1&＃39; data-toggle&＃61;"dropdown" >Dropdown
<span class&＃61;&＃39;caret&＃39;>span>
button>
<ul class&＃61;"dropdown-menu dropdown-menu-right" aria-labelledby&＃61;"dropdownMenu1">
<li><a href&＃61;"#" tabindex&＃61;"-1">Actiona>li>
<li><a href&＃61;"#" tabindex&＃61;"-1">Anothera>li>
<li><a href&＃61;"#" tabindex&＃61;"-1">Something else herea>li>
<li><a href&＃61;"#" tabindex&＃61;"-1">Separated linka>li>
ul>
div>