Bootstrap drop-down menu float problem, bootstrapfloat

Bootstrap drop-down menu float problem, bootstrapfloat

When learning the drop-down menu in bootstrap, you may encounter the following situations:

<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> drop-down menu <span class = "caret"> </span> </button> <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1 ">... </Ul> </div>

The Class Name of ul is pull-right or dropdown-menu-right. You can change the direction of the drop-down menu:

The default style is:

The following is the css code of. pull-right.

. Dropdown-menu.pull-right {right: 0; left: auto;}. dropdown-menu-right {right: 0; left: auto ;}

However, you also need to set the style of the parent element div to float: left !!!

Cause:

Div is a block-level element that automatically fills the width of the parent element ,:

 

After the float of the div is set to left, the div will leave the Document Stream to wrap the button element, which is the alignment of the menu to the right of the button.

For more information, please comment. What ~~~