本文翻譯自：twitter bootstrap navbar fixed top overlapping site
I am using bootstrap on my site and am having issues with the navbar fixed top. 我在網站上使用引導程序，並且導航欄固定頂部出現問題。 When I am just using the regular navbar, everything is fine. 當我只使用常規導航欄時，一切都很好。 However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the navbar isn't there and the navbar overlaps it. 但是，當我嘗試將其切換到導航欄固定頂部時，該網站上的所有其他內容都會向上移動，就像導航欄不存在並且導航欄與之重疊一樣。 here's basically how i laid it out: 這基本上是我的佈局方式：
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. 我試圖完全複製引導程序示例，但僅在使用navbar fixed top時仍然存在此問題。 what am I doing wrong? 我究竟做錯了什麼？
#1樓
參考：https://stackoom.com/question/kg3t/twitter-bootstrap導航欄固定頂部重疊站點
#2樓
Your answer is right in the docs : 您的答案是正確的docs ：
Body padding required 需要身體填充
The fixed navbar will overlay your other content, unless you add
paddingto the top of the<body>. 除非您在<body>的頂部添加padding，否則固定的導航欄將覆蓋您的其他內容。 Try out your own values or use our snippet below. 試用您自己的值或使用下面的代碼段。 Tip: By default, the navbar is 50px high. 提示：默認情況下，導航欄的高度爲50px。body { padding-top: 70px; }Make sure to include this after the core Bootstrap CSS. 確保在覈心Bootstrap CSS 之後添加此名稱。
and in the Bootstrap 4 docs... 並在Bootstrap 4文檔中...
Fixed navbars use position: fixed, meaning they're pulled from the normal flow of the DOM and may require custom CSS (eg, padding-top on the ) to prevent overlap with other elements. 固定的導航欄使用位置：固定，這意味着它們是從DOM的正常流程中拉出的，並且可能需要自定義CSS（例如上的padding-top）以防止與其他元素重疊。
#3樓
This issue is known and there's a workaround in the twitter bootstrap site: 這個問題是已知的，並且在twitter引導站點中有一種解決方法：
When you affix the navbar, remember to account for the hidden area underneath. 當您粘貼導航欄時，請記住考慮下面的隱藏區域。 Add 40px or more of padding to the
<body>. 向<body>添加40px或更多的填充。 Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS. 確保將其添加到核心Bootstrap CSS之後和可選的響應CSS之前。
This worked for me: 這爲我工作：
body { padding-top: 40px; }
#4樓
As others have stated adding a padding-top to body works great. 正如其他人所說，在身體上添加填充頂部效果很好。 But when you make the screen narrower (to cell phone widths) there is a gap between the navbar and the body. 但是，當您將屏幕變窄（以手機寬度爲單位）時，導航欄和機身之間會出現間隙。 Also, a crowded navbar can wrap to a multi-line bar, overwriting some of the content again. 同樣，擁擠的導航欄可以包裝到多行欄，再次覆蓋某些內容。
This solved these kinds of issues for me 這爲我解決了這類問題
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
This makes a 40px padding by default and 0px when under 768px width (which according to bootstrap's docs is the cell phone layout cutoff where the gap would be created) 默認情況下，這會產生40px的填充，當寬度小於768px時會填充0px（根據bootstrap的文檔，這是將在其中創建間隙的手機佈局截止點）
#5樓
I put this before the yield container: 我把它放在yield容器之前：
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
I like this approach because it documents the hack needed to get it work, plus it also works for the mobile nav. 我喜歡這種方法，因爲它記錄了使其工作所需的hack，此外它還適用於移動導航。
EDIT - this works much better: 編輯-效果更好：
@media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
#6樓
All the previous solutions hard-code 40 pixels specifically into the html or CSS in one fashion or another. 以前的所有解決方案都以一種或另一種方式將40像素專門編碼爲html或CSS。 What if the navbar contains a different font-size or an image? 如果導航欄包含其他字體大小或圖像，該怎麼辦？ What if I have a good reason not to mess with the body padding in the first place? 如果我有充分的理由首先不弄亂身體填充怎麼辦？ I have been searching for a solution to this problem, and here is what I came up with: 我一直在尋找解決此問題的方法，這是我想到的：
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
You can move it up or down by adjusting the '1'. 您可以通過調整“ 1”上下移動它。 It seems to work for me regardless of the size of the content in the navbar, before and after resizing. 大小調整前後，無論導航欄中內容的大小如何，它似乎都對我有用。
I am curious what others think about this: please share your thoughts. 我很好奇其他人對此的看法：請分享您的想法。 (It will be refactored as not to repeat, btw.) Besides using jQuery, are there any other reasons not to approach the problem this way? （順便說一句，它將被重構爲不再重複）。除了使用jQuery，還有其他原因不能以這種方式解決問題嗎？ I've even got it working with a secondary navbar like this: 我什至可以使用這樣的輔助導航欄：
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Above is on Bootstrap 2.3.2 - will it work in 3.x As long as the generic class names remain... in fact, it should work independent of bootstrap, right? PS：上面的內容在Bootstrap 2.3.2上-它將在3.x中工作，只要保留通用類名...實際上，它應該獨立於引導程序工作，對嗎？
EDIT: Here is a complete jquery function that handles two stacked, responsive fixed navbars of dynamic size. 編輯：這是一個完整的jquery函數，可以處理兩個堆疊的動態大小的響應式固定導航欄。 It requires 3 html classes(or could use id's): user-top, admin-top, and contentwrap: 它需要3個html類（或可以使用id）：user-top，admin-top和contentwrap：
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});