引導導航欄后面的空間

Question

使用bootstrap的navbar ，我試圖弄清楚如何使它不隱藏身體部分的頂部。

實際上，使用此處推薦的內容可以很好地解決：

Twitter Bootstrap - 阻止頁面頂部內容的頂部導航欄

但是仍有一些東西不起作用：當你有這樣的鏈接時：

<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
<li><a href="#section4">Go to Section 4</a></li>

和

<h4 id="Section 1">Section 1</h4>
<p>Content of Section 1</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 2">Section 2</h4>
<p>Content of Section 2</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 3">Section 3</h4>
<p>Content of Section 3</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 4">Section 4</h4>
<p>Content of Section 4</p>
<p><a href="#">Back to Top</a></p>

在這種情況下，當您單擊，例如，第2節直接鏈接（或快捷方式）時，頁面正確向下滾動直到第2節，但它隱藏在引導導航欄后面的開頭。

關於如何解決這個問題的任何線索？

Answer 1

在<h4>上添加一些頂部填充以計算navbar的高度。 即把它放在你的CSS中：

h4 {
  padding-top: 30px;
}

當然，將30px更改為實際的navbar高度。

Answer 2

通過將：target psuedo-selector添加到鏈接的CSS，您可以將定義的填充應用於所選鏈接（只要它在瀏覽器中顯示為：www.example.com＃link1）。

我花了最后2個小時試圖搜索網絡試圖找到Jquery或JS來應用填充到目標div並在修改我的Google 搜索條件后發現這個

可能有一種方法可以用舊版瀏覽器來證明這一點，但就目前而言，這讓我成為一個快樂的露營者。

Answer 3

我遇到了同樣的問題，並沒有找到真正的解決方案，但只是更多的解決方法（如“填充頂部”解決方案本身，這似乎非常hackish我）。 看起來topbar問題仍然沒有解決，人們只是以某種方式破解它。

一個適合我的非侵入性解決方案（盡可能好）是將以下JavaScript添加到頁面中（除了“padding-top”hack）：

var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);

我在對引導程序GitHub問題的評論中發現了這一點。 但是，該功能不會在所有必要的場合執行（例如，當再次訪問同一個錨時）。

更可靠的解決方法是使用CSS相對定位移動錨位置（在此StackOverflow答案中找到：

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

但是，這更具侵入性，因為你必須給你的錨一個類（以區別於鏈接）。 因此，您必須更新所有錨定HTML代碼（這可能並非總是可能，例如，當您處理生成錨點的剛性CMS時）：

<a class="anchor" id="top"></a>