Twitter bootstrap 3 锚定标签和导航条未对齐-Bootstrap 3.0
我使用Bootstrap3创建了一个带有固定导航条顶部的页面。在主体中，我有带有#锚定标记的元素。当我从导航栏单击时，将显示元素位置，但行似乎未对齐（大约为导航栏的高度）-BS3.0文档说，您需要将车身顶部的衬垫放置到导航栏的高度（在这种情况下为50px），并使车身位置相对。有帖子说文档不正确，我似乎无法解决这个问题 这是一把小提琴：还有全屏 点击“关于”，滚动应该停止在圣诞老人标题的顶部。在我的浏览器（Chrome）中，它远远超出了这一点，隐藏了标题。如有任何见解，将不胜感激Twitter bootstrap 3 锚定标签和导航条未对齐-Bootstrap 3.0,twitter-bootstrap-3,Twitter Bootstrap 3,我使用Bootstrap3创建了一个带有固定导航条顶部的页面。在主体中，我有带有#锚定标记的元素。当我从导航栏单击时，将显示元素位置，但行似乎未对齐（大约为导航栏的高度）-BS3.0文档说，您需要将车身顶部的衬垫放置到导航栏的高度（在这种情况下为50px），并使车身位置相对。有帖子说文档不正确，我似乎无法解决这个问题 这是一把小提琴：还有全屏 点击“关于”，滚动应该停止在圣诞老人标题的顶部。在我的浏览器（Chrome）中，它远远超出了这一点，隐藏了标题。如有任何见解，将不胜感激 <!DOC
<!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>
您可以使用简单的JavaScript实现这一点。下面的提琴将帮助您找出答案 在上面的小提琴代码中，根据固定的收割台高度更新fromTop高度
var fromTop = 50; // Give Your fixed header height
<a class="anchor" id="top"></a>
您可以根据导航栏的大小调整顶部。谢谢@Kiran。我添加了代码，到目前为止，它在Chrome中运行良好。将检查其他浏览器等。我很惊讶，引导无法处理这一点，需要一个解决办法。我讨厌添加更多的代码，但也许这是一种方式。Bootstrap文档通过将
margin top:20pxidh1h2<a class="anchor" id="top"></a>
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}