bootstrap--Component drop-down menu

A switchable, contextual menu that displays a list of links.

Snap To

b By default, the drop-down menu is automatically positioned as 100% width along the top and left sides of the parent element. To .dropdown-menu add a .dropdown-menu-right class, you can make the menu right-aligned.

additional location may be required for require additional positioning

In the normal document flow, the drop-down menu is positioned via CSS. This means that the drop-down menu may be partially obscured by setting the overflow parent element of the property or beyond the display range of the viewport (viewport). If this problem occurs, please resolve it yourself.

do not recommend .pull-right using

Starting with the v3.1.0 version, we no longer recommend using classes for drop-down menus .pull-right . To right-align the menu, use the .dropdown-menu-right class. To add a right-aligned navigation (NAV) component to the navigation bar, use .pull-right the mixin version to automatically align the menu. If you want to align Left, use your .dropdown-menu-left class.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">  ...</ul>

title

in any drop-down menu, you can add a caption to indicate a set of actions .

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">  ...  <li class="dropdown-header">Dropdown header</li>  ...</ul>

Split Line

Add a split line to the drop-down menu to group multiple links.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">  ...  <li role="separator" class="divider"></li>  ...</ul>

menu items that are disabled

Adds a class for the elements in the drop-down menu <li> .disabled , thereby disabling the corresponding menu item.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">  <li><a href="#">Regular link</a></li>  <li class="disabled"><a href="#">Disabled link</a></li>  <li><a href="#">Another link</a></li></ul>

说明：Bootstrap下拉列表默认的情况下需要点击，因为它是为了方便移动端，但是在PC端有时候我们需要鼠标悬停就显示下拉菜单，这个时候我们就需要从写一个css方法，如下：

. navbar. Nav > li:hover. dropdown-menu {
Display:block;
}

To learn more about Bootstrap, please visit Bootstrap Chinese official website http://www.bootcss.com/

bootstrap--Component drop-down menu