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