課程
/前端開發(fā)
/Bootstrap
/玩轉(zhuǎn)Bootstrap(基礎(chǔ))
怎樣才可以讓導(dǎo)航欄不遮住內(nèi)容?
2016-11-21
源自:玩轉(zhuǎn)Bootstrap(基礎(chǔ)) 6-6
正在回答
方法(一)
~這個符號是同輩的意思
.navbar-fixed-top ~ .content的意思就是說 類名為.navbar-fixed-top的元素 的 類名為.content同輩元素
<div class="content">我是內(nèi)容</div>意思就是你的正文
老師的意思是將你要固定的導(dǎo)航條寫在正文的上面 然后 在你開始正文的div中添加類名content,
然后再在文件中添加下列樣式代碼(css中):
.navbar-fixed-top ~ .content { ? padding-top: 70px;}
/*當(dāng)固定導(dǎo)航條是固定在頂端的時候,需要在文件中添加此樣式*/
.navbar-fixed-bottom ~ .content { ?padding-bottom: 70px;}
/*當(dāng)固定導(dǎo)航條是固定在底部的時候,需要在文件中添加此樣式*/
或者
方法(二)
直接在css中設(shè)置body元素的樣式:
body{
????padding-top:70px;/*當(dāng)固定導(dǎo)航條是固定在頂端的時候,需要在文件中添加此樣式*/
?????padding-bottom: 70px;/*當(dāng)固定導(dǎo)航條是固定在底部的時候,需要在文件中添加此樣式*/
}
設(shè)置導(dǎo)航欄的z-index為最大
舉報
告訴你使用Bootstrap,并且能夠獨立定制出適合自己的Bootstrap
1 回答導(dǎo)航欄可以改變大小嗎
2 回答中屏?xí)r導(dǎo)航條內(nèi)容過多內(nèi)容換行怎么辦
1 回答導(dǎo)航欄收回問題
1 回答底部會遮擋內(nèi)容,怎么解決?
1 回答導(dǎo)航可以是膠囊的,那么導(dǎo)航條可以做成膠囊形式嗎?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-02-27
方法(一)
~這個符號是同輩的意思
.navbar-fixed-top ~ .content的意思就是說 類名為.navbar-fixed-top的元素 的 類名為.content同輩元素
<div class="content">我是內(nèi)容</div>意思就是你的正文
老師的意思是將你要固定的導(dǎo)航條寫在正文的上面 然后 在你開始正文的div中添加類名content,
然后再在文件中添加下列樣式代碼(css中):
.navbar-fixed-top ~ .content {
? padding-top: 70px;
}
/*當(dāng)固定導(dǎo)航條是固定在頂端的時候,需要在文件中添加此樣式*/
.navbar-fixed-bottom ~ .content {
?padding-bottom: 70px;
}
/*當(dāng)固定導(dǎo)航條是固定在底部的時候,需要在文件中添加此樣式*/
或者
方法(二)
直接在css中設(shè)置body元素的樣式:
body{
????padding-top:70px;/*當(dāng)固定導(dǎo)航條是固定在頂端的時候,需要在文件中添加此樣式*/
?????padding-bottom: 70px;/*當(dāng)固定導(dǎo)航條是固定在底部的時候,需要在文件中添加此樣式*/
}
2016-11-21
設(shè)置導(dǎo)航欄的z-index為最大