自適應(yīng)導(dǎo)航指的是導(dǎo)航占據(jù)容器全部寬度,而且菜單項(xiàng)可以像表格的單元格一樣自適應(yīng)寬度。自適應(yīng)導(dǎo)航和前面使用“btn-group-justified”制作的自適應(yīng)按鈕組是一樣的。只不過(guò)在制作自適應(yīng)導(dǎo)航時(shí)更換了另一個(gè)類名“nav-justified”。當(dāng)然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如:
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
運(yùn)行效果如下:(可單擊全屏查看)
我來(lái)試試:完成下面任務(wù)
編寫代碼制作一個(gè)寬度自適應(yīng)的膠囊形(pills)導(dǎo)航條
備注:這一小節(jié)沒(méi)有正確性驗(yàn)證,請(qǐng)查看結(jié)果窗口,從而判斷輸入代碼是否正確。
參考代碼:
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)