實現右對齊方法：
Bootstrap框架中下拉菜單默認是左對齊，如果你想讓下拉菜單相對于父容器右對齊時，可以在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名，如下所示：
<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>
上面代碼中的“pull-right”類可以用“dropdown-menu-right”代替，兩個類的作用是一樣的，可從下面的源代碼中看出。
實現原理：
對應的樣式如下：
/*源碼請查看bootstrap.css文件第3030行～第3033行和3082行～第3085行*/
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
同時一定要為.dropdown添加float:leftcss樣式。
.dropdown{
float: left;
}
運行效果如下所示：
下拉菜單與父容器左邊對齊:
與此同時，還有一個類名剛好與“dropdown-menu-right”相反的類名“dropdown-menu-left”，其效果就是讓下拉菜單與父容器左邊對齊，其實就是默認效果。
/*請查看bootstrap.css文件第3086行～第3089行*/
.dropdown-menu-left {
right: auto;
left: 0;
}
我來試試：完成下面任務
編寫代碼實現下拉菜單，效果如下圖：
參考代碼：
<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">
<li role="presentation" class="dropdown-header">水果</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">蘋果</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">蔬菜</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">蘿卜</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>
</div>
備注:這一小節沒有正確性驗證，請查看結果窗口與教案所給的結果圖片是否一致，從而判斷輸入代碼是否正確。
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報