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

WBOY
发布: 2016-06-24 11:35:06
原创
1328 人浏览过

在学习bootstrap中的下拉菜单时,遇到下面情况:

<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">  下拉菜单  <span class="caret"></span>  </button>  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">   …  </ul></div>
登录后复制

添加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右边对齐

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

 

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板