                        課程
                    
                        /前端開發(fā)
                        
                            /Bootstrap
                        
                        /玩轉(zhuǎn)Bootstrap（基礎(chǔ)）

我設(shè)置dropdown-menu-right后整個ul跑到瀏覽器最右邊了

我設(shè)置dropdown-menu-right后整個ul跑到瀏覽器最右邊了，說好的與父容器對齊呢，然后我看了.dropdown-menu添加了浮動屬性，它的位置已經(jīng)不再父元素之內(nèi)了啊

劉洪光

2016-08-26

源自：玩轉(zhuǎn)Bootstrap（基礎(chǔ)） 5-5

關(guān)注問題我要回答

6156

操作

收起

2 回答

Colorfulday
2016-09-04

給div.dropdown添加右浮動樣式

style="float:right;"

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

沒有冰激凌的夏天不完整
2016-08-27

為了方便看父容器位置，你可以給div添加邊框，希望能幫到你

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>對齊方式</title>
<link?rel="stylesheet"?>
<link?rel="stylesheet"?href="style.css">
</head>
<body>
<h4>使用pull-right類使下拉菜單與父容器右邊對齊</h4>
?<div?class="dropdown"?style="border:1px?solid?#ccc">
??<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">
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
????<li?role="presentation"?class="divider"></li>
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
??</ul>
</div>
<br?/>
<br?/>
<h4>使用dropdown-menu-right類使下拉菜單與父容器右邊對齊</h4>
<div?class="dropdown"?style="border:1px?solid?#ccc">
??<button?class="btn?btn-default?dropdown-toggle"?type="button"?id="dropdownMenu1"?data-toggle="dropdown">
????下拉菜單
????<span?class="caret"></span>
??</button>
??<ul?class="dropdown-menu?dropdown-menu-right"?role="menu"?aria-labelledby="dropdownMenu1">
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
????<li?role="presentation"?class="divider"></li>
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
??</ul>
</div>?
<br?/>
<br?/>
<h4>下拉菜單與父容器左邊對齊</h4>
<div?class="dropdown"?style="border:1px?solid?#ccc">
??<button?class="btn?btn-default?dropdown-toggle"?type="button"?id="dropdownMenu1"?data-toggle="dropdown">
????下拉菜單
????<span?class="caret"></span>
??</button>
??<ul?class="dropdown-menu?dropdown-menu-left"?role="menu"?aria-labelledby="dropdownMenu1">
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
????<li?role="presentation"?class="divider"></li>
????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li>
??</ul>
</div>?
??<script?src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
??<script?src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>?
??
??????<div?class="dropdown"?style="border:1px?solid?#ccc">
??????????<button?class="btn?btn-default?dropdown-toggle"?type="button"?id="dropdown2"
??????????data-toggle="dropdown">
??????????????食物
??????????????<span?class="caret"></span>
??????????</button>
??????????<ul?class="dropdown-menu?dropdown-menu-right?">
??????????????<li?role="presenttation">水果</li>
??????????????<li?role="presentation">蘋果</li>
??????????</ul>
??????</div>
??</body>
</html>