Bootstrap Series--27. Drop-down menu alignment

The bootstrap Frame drop-down menu is left-aligned by default, and you can add a "pull-right" or "Dropdown-menu-right" on "Dropdown-menu" If you want the drop-down menu to be right-aligned relative to the parent container The class name.

<h4>Use the Pull-right class to align the drop-down menu to the right of the parent container</h4> <Divclass= "Dropdown">  <Buttonclass= "btn btn-default dropdown-toggle"type= "button"ID= "DropdownMenu1"Data-toggle= "Dropdown">Drop- down menu<spanclass= "Caret"></span>  </Button>  <ulclass= "Dropdown-menu pull-right"role= "Menu"Aria-labelledby= "DropdownMenu1">    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>    <Lirole= "Presentation"class= "Divider"></Li>    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>  </ul></Div><BR/><BR/><h4>Use the Dropdown-menu-right class to align the drop-down menu to the right of the parent container</h4><Divclass= "Dropdown">  <Buttonclass= "btn btn-default dropdown-toggle"type= "button"ID= "DropdownMenu1"Data-toggle= "Dropdown">Drop- down menu<spanclass= "Caret"></span>  </Button>  <ulclass= "Dropdown-menu dropdown-menu-right"role= "Menu"Aria-labelledby= "DropdownMenu1">    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>    <Lirole= "Presentation"class= "Divider"></Li>    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>  </ul></Div> <BR/><BR/><h4>The drop-down menu aligns to the left of the parent container</h4><Divclass= "Dropdown">  <Buttonclass= "btn btn-default dropdown-toggle"type= "button"ID= "DropdownMenu1"Data-toggle= "Dropdown">Drop- down menu<spanclass= "Caret"></span>  </Button>  <ulclass= "Dropdown-menu dropdown-menu-left"role= "Menu"Aria-labelledby= "DropdownMenu1">    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>    <Lirole= "Presentation"class= "Divider"></Li>    <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Drop-down menu item</a></Li>  </ul></Div> 

At the same time, there is a class name "Dropdown-menu-left" with the same class name as the "Dropdown-menu-right", and the effect is to have the drop-down menu aligned to the left of the parent container, which is actually the default effect

There is a problem here, if the right alignment, although the style is set, but it is easy to show the style confusion, the drop-down menu position is <div class= "dropdown" > Width to determine, so at different resolutions will vary.

The solution here is to fix the width of the Div, and one is to put the button on the right.

Bootstrap Series--27. Drop-down menu alignment