Question

我使用Bootstrap 3创建了一个固定导航栏顶部的页面。在身体中我有#anchor标签的元素。当我从导航栏中单击时，会显示元素位置，但似乎行未对齐（大约是导航栏的高度） - BS3.0 docs说你需要将body的padding-top放到导航栏的高度（在这种情况下为50px）并且具有相对的身体位置。有关于文档不正确的帖子，我似乎无法解决这个问题......

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

点击＆＃39;关于＆＃39;并且滚动应该停在圣诞老人标题的顶部。在我的浏览器（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;
}

Answer 1

您可以使用简单的JavaScript实现此目的。在Fiddle下方将帮助您解决问题。

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

在上面的小提琴代码中，根据固定的标题高度更新fromTop高度。

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

您还可以在以下位置找到更多信息： offsetting an html anchor to adjust for fixed header

Answer 2

我使用了this solution，没有javascript，只有css，并为我工作过：

给你的主持人上课：
<a class="anchor" id="top"></a>
然后，您可以将锚点定位为高于或低于其中的偏移量它实际上出现在页面上，通过使它成为块元素和相对定位它。 -250px将锚定位置为250px
a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

您可以将顶部调整为导航栏的大小。

锚标签和导航栏没有排队 - Bootstrap 3.0

2 个答案: