錨標記和導航欄不排隊 - 引導3.0

我已經使用Bootstrap 3創建一個固定的導航欄頂部的頁面。在body中我有#anchor標籤的元素。當我從導航欄中點擊時，會顯示元素位置，但似乎存在行的未對齊（大約是導航欄的高度） - BS3.0文檔說您需要將主體的填充頂部導航欄的高度（在這種情況下爲50px）並且具有相對的身體位置。已經有關於不作爲文檔正確的，我似乎無法修復這個帖子...錨標記和導航欄不排隊 - 引導3.0

這裏是一個小提琴：http://jsfiddle.net/richnasser/fkLh9sf4/1/和全屏http://jsfiddle.net/richnasser/fkLh9sf4/1/embedded/result/

點擊「關於」和滾動應停在聖誕老人頭頂上。在我的瀏覽器（Chrome）中，它遠遠超出了這個範圍，隱藏了標題。任何見解將不勝感激。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>North Pole Industries</title> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="topNavBar"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button class ="navbar-toggle" data-toggle = "collapse" data-target = "#navHeaderCollapse"> 
         <span class = "glyphicon glyphicon-list-alt"></span> 
        </button> 
        <div class = "collapse navbar-collapse" id="navHeaderCollapse"> 
         <ul class = "nav navbar-nav"> 
          <li class="active"><a href="#home">home</a></li> 
          <li><a href="#capabilities">capabilities</a></li> 
          <li><a href="#client">client list</a></li> 
          <li><a href="#about">about</a></li> 
          <li><a href="#contact">contact</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </nav> 
    <div class="container-fluid"> 
      <div class = "row" id="home"> 
       <div><img src= "http://placekitten.com/1200/600" class="img-responsive" alt="kitty"></div> 
      </div> 

      <div class = "row"> 
       <div><img src= "http://placehold.it/1200x400" class="img-responsive" alt="grey"></div> 
      </div> 

      <div class = "row"> 
       <div class="col-md-3" id="about"><h3>Santa Claus <small>chief</h3></small><p class="text-justify">Santa brings over fifteen years of experience in the auto industry through a combination of roles in marketing, field work and wind tunnel studies. His success is derived from innovative thinking and a keen ability to solve complicated problems. Santa has worked in both US and International markets doing both strategic and tactical marketing.</p> 
       <a href="#santanmore" data-toggle="modal" data-target="#santamore">Read More</a></div> 
       <div class="col-md-3" class="headshot"><img src= "http://placehold.it/260x400" class="img-responsive" alt="santa"></div> 
       <div class="col-md-3" class="headshot"><img src= "http://placehold.it/260x400" class="img-responsive" alt="rudolf"></div> 
       <div class="col-md-3"><h3>Rudolf <small>dog</h3></small><p class="text-justify">Rudolf counts on over fifteen years experience delivering leadership and marketing capabilities to auto and technology companies, creating profitable and sustainable business growth. He built his reputation on a solid commitment to customers, passion for marketing excellence, and a strong climate of teamwork.</p> 
       <a href="#rudolfmore" data-toggle="modal" data-target="#rudolfmore">Read More</a></div> 
      </div> 

      <div class = "row"> 
        <div><img src= "http://placehold.it/1200x400" class="img-responsive"></div> 
      </div> 


     </div>

和CSS

body { 
    position: relative; 
    padding: 50px; 
}

來源

2014-10-31 RichNasser

Bootstrap文檔通過在元素中添加'margin-top：20px'來解決滾動問題（在他們的情況下，只有'h1'，'h2'等等）。 – cvrebert 2014-10-31 18:48:50

你可以做到這一點通過簡單的JavaScript。小提琴下面會幫助你弄清楚。

http://jsfiddle.net/ianclark001/aShQL/

在上面的撥弄代碼，更新fromTop高度按您的固定報頭的高度。

var fromTop = 50; // Give Your fixed header height

，你也可以找到更多信息： offsetting an html anchor to adjust for fixed header

來源

2014-10-31 07:18:00

謝謝@Kiran。我添加了代碼，並且它在Chrome中工作至今。將檢查其他瀏覽器等。我很驚訝，Bootstrap無法處理這個問題，需要一個解決方法。討厭添加更多的代碼，但也許這是要走的路。 – RichNasser 2014-10-31 15:21:22

我用this solution，沒有JavaScript的，只有CSS和工作對我來說：

給你的錨類：
<a class="anchor" id="top"></a> 
然後，您可以將定位點的偏移量設置爲較高或較低的偏移量r比它實際上出現在頁面上，通過使它成爲塊元素並且相對定位它。 -250px將定位錨高達250像素
a.anchor { 
    display: block; 
    position: relative; 
    top: -250px; 
    visibility: hidden; 
} 

的導航欄，你可以調整前的大小。

來源

2016-05-01 19:15:44 mqueirozcorreia

錨標記和導航欄不排隊 - 引導3.0

回答

相關問題