>  기사  >  웹 프론트엔드  >  Bootstrap的下拉菜单float问题_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 11:35:061318검색

在学习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右边对齐

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

 

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.