動態引導程序3 navbar固定頂部重疊內容

Question

我發現otherquestionsthat解決了類似的問題，但是稍有不同，因爲頂部欄內容會動態更改。這意味着我不知道條在哪個屏幕寬度上會開始重疊內容。

此CSS以當前頂欄文本的標準分辨率工作。我知道我可以在CSS中使用@media（max-width）來調整填充頂部，但這並不代表動態更改頂部欄文本。

body { 
    min-height: 2000px; 
    padding-top: 70px; 
} 

有沒有辦法檢查頂部欄的高度，並添加一個偏移量，而不使用Javascript的身體？

另一個也許更好的選擇是，當頂部欄移動到移動視圖時，只要單個行過於擁擠。任何想法如何做到這一點？

感謝

https://jsfiddle.net/waspinator/4c2yespy/7/embedded/result/

Original fixed top example。

---

編輯： 更新的jsfiddle使用javascript修復https://jsfiddle.net/4c2yespy/8/

Answer 1

有沒有辦法做到只有這個機智的CSS，但你可以使用JavaScript調整事件動態地改變身體的填充頂：

function adjust_body_offset() { 
    $('body').css('padding-top', $('.navbar-default').outerHeight(true) + 'px'); 
} 

$(window).resize(adjust_body_offset); 

$(document).ready(adjust_body_offset);