欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Bootstrap的下拉菜单float问题_html/css_WEB-ITnose

程序员文章站 2022-04-11 17:35:54
...
在学习bootstrap中的下拉菜单时,遇到下面情况:

添加ul的类名为pull-right或dropdown-menu-right,可以改变下拉菜单的对其方向,效果图为:

默认样式为:

下面贴上:.pull-right的css代码

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

但还需要设置父元素div的样式为float:left!!!

原因:

div是块级元素,会自动填满父元素的宽度,效果图:

当设置了div的float为left之后,div会脱离文档流,从而包裹button元素,是菜单向button右边对齐

假如你有补充,请评论下。么么哒~~~