實(shí)現(xiàn)右對(duì)齊方法：
Bootstrap框架中下拉菜單默認(rèn)是左對(duì)齊，如果你想讓下拉菜單相對(duì)于父容器右對(duì)齊時(shí)，可以在“dropdown-menu”上添加一個(gè)“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”代替，兩個(gè)類的作用是一樣的，可從下面的源代碼中看出。
實(shí)現(xiàn)原理：
對(duì)應(yīng)的樣式如下：
/*源碼請(qǐng)查看bootstrap.css文件第3030行～第3033行和3082行～第3085行*/
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
同時(shí)一定要為.dropdown添加float:leftcss樣式。
.dropdown{
float: left;
}
運(yùn)行效果如下所示：
下拉菜單與父容器左邊對(duì)齊:
與此同時(shí)，還有一個(gè)類名剛好與“dropdown-menu-right”相反的類名“dropdown-menu-left”，其效果就是讓下拉菜單與父容器左邊對(duì)齊，其實(shí)就是默認(rèn)效果。
/*請(qǐng)查看bootstrap.css文件第3086行～第3089行*/
.dropdown-menu-left {
right: auto;
left: 0;
}
我來試試：完成下面任務(wù)
編寫代碼實(shí)現(xiàn)下拉菜單，效果如下圖：
參考代碼：
<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>
備注:這一小節(jié)沒有正確性驗(yàn)證，請(qǐng)查看結(jié)果窗口與教案所給的結(jié)果圖片是否一致，從而判斷輸入代碼是否正確。
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)