Bootstrap Nav使命名链接在导航栏下滚动[重复]
Posted
技术标签:
【中文标题】Bootstrap Nav使命名链接在导航栏下滚动[重复]【英文标题】：Bootstrap Nav making named links scroll under navigation bar [duplicate] 【发布时间】：2016-06-20 13:12:40 【问题描述】：我无法弄清楚为什么名为链接的引导程序会在导航容器下方（后面）滚动。我怎样才能让它定位“容器”，以便它使用导航栏的底部作为页面的顶部？
效果可以看这里：https://jsfiddle.net/9azLc6sz/
<div class="navbar navbar-default navbar-fixed-top" >
<div class="container" >
<div class="navbar-header" >
<a href="index.html" class="navbar-brand" >scroll test</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main" >
<span class="icon-bar" ></span>
<span class="icon-bar" ></span>
<span class="icon-bar" ></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main" >
<!-- nav loaded via ajax, js call at bottom of page -->
<ul class="nav navbar-nav" >
<li class="dropdown" >
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="sections" >Sections <span class="caret" ></span></a>
<ul class="dropdown-menu" aria-labelledby="sections" >
<li><a href="main.html" >Main</a></li>
<li class="divider" ></li>
<li><a href="a.html" >A</a></li>
<li><a href="b.html" >B</a></li>
<li><a href="c.html" >C</a></li>
</ul>
</li>
<li class="dropdown" >
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="Asec" >A <span class="caret" ></span></a>
<ul class="dropdown-menu" aria-labelledby="Asec" >
<li><a href="A.1.html" >A Get Started</a></li>
<li><a href="A.2.html" >How to A</a></li>
<li><a href="A.4.html" >A Process</a></li>
</ul>
</li>
<li class="dropdown" >
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="Bsec" >B <span class="caret" ></span></a>
<ul class="dropdown-menu" aria-labelledby="Bsec" >
<li><a href="B.1.html" >B Get Started</a></li>
<li><a href="B.2.html" >Create a B</a></li>
</ul>
</li>
<li class="dropdown" >
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="Csec" >C <span class="caret" ></span></a>
<ul class="dropdown-menu" aria-labelledby="Csec" >
<li><a href="C.1.html" >C Overview</a></li>
<li><a href="C.2.html" >C Information</a></li>
<li><a href="C.3.html" >C Posting</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" >
<li><a href="faq.html" >FAQ</a></li>
<li><a href="contact.html" >Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="container" >
<div class="page-header" id="banner" >
<div class="row" >
<div class="col-lg-8 col-md-7 col-sm-6" >
<!-- page title -->
<h1>Frequently Asked Questions</h1>
<!-- page content -->
<ul>
<li><a href="#a" >Does this site promise that I will...?</a></li>
<li><a href="#b" >Should I subscribe to this service if...?</a></li>
<li><a href="#c" >How long will it be before I hear from...?</a></li>
</ul>
<p>In choosing Answers . . . </p>
<a href="#" >Return to Top</a>
<h3><a name="a" >Does this site promise that I will...?</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue iaculis scelerisque. Maecenas tellus eros, laoreet sed libero in, placerat ultricies nisi. Nullam non nunc sapien. Quisque vestibulum arcu quis sem pellentesque vehicula. Praesent at tortor at justo ultrices tempus. Nam volutpat feugiat sapien. Aenean rutrum ullamcorper augue, et faucibus enim hendrerit in.</p>
<p>Donec fermentum orci id nisl imperdiet pulvinar. Sed dolor lacus, pretium vitae magna sed, laoreet rhoncus ipsum. Ut fringilla ullamcorper lectus at mollis. In lobortis ac sem ut hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum aliquet urna ac sapien blandit ullamcorper. Integer gravida, risus a dictum pulvinar, eros ante pharetra purus, quis porta enim massa in nisl. Sed fringilla mauris sit amet nibh dapibus, vitae aliquam elit tempor. Vestibulum vitae diam ante. Cras hendrerit porta diam eget dapibus. Nam aliquet dolor in justo feugiat luctus. Nunc sit amet condimentum nibh. Pellentesque dignissim orci eros, euismod mollis turpis tempor et. In hac habitasse platea dictumst. Nullam pretium fringilla urna ac rhoncus. Vivamus odio dolor, sodales a euismod in, consequat tempor tellus.</p>
<a href="#" >Return to Top</a>
<h3><a name="b" >Should I subscribe to this service if...?</a></h3>
<p>Nullam non elementum ipsum. Aliquam imperdiet tortor eros, nec finibus erat viverra in. Nulla turpis dolor, sagittis quis mi nec, ornare viverra nisi. Mauris quis aliquet metus. Vestibulum pulvinar orci eget cursus aliquet. Integer laoreet arcu velit. Nullam ultrices ligula libero, a auctor dolor feugiat a. Vestibulum dolor lectus, mollis et sapien quis, porta dictum libero. Sed in ante justo. Cras ultricies tempor faucibus. Aliquam consequat et magna non finibus.</p>
<p>Phasellus pulvinar urna vitae volutpat congue. Vivamus non aliquam nulla. Nam nulla enim, fringilla ac condimentum quis, ullamcorper tincidunt turpis. Vestibulum tristique, lacus vitae placerat posuere, sapien neque sollicitudin quam, et ullamcorper libero nisl at ipsum. Sed eleifend risus leo, et sollicitudin erat faucibus et. Vivamus tellus diam, mattis sit amet porta at, fermentum et lacus. Sed pellentesque neque sem, cursus faucibus elit fringilla ac. Nulla turpis eros, cursus ut tincidunt sit amet, vehicula bibendum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer felis sem, sagittis ut eleifend vel, semper quis lacus. Curabitur quis tortor congue, gravida urna sit amet, commodo quam. Nullam id neque lorem. Proin porta aliquam urna, vel auctor neque eleifend vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<a href="#" >Return to Top</a>
<h3><a name="c" >How long will it be before I hear from...?</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue iaculis scelerisque. Maecenas tellus eros, laoreet sed libero in, placerat ultricies nisi. Nullam non nunc sapien. Quisque vestibulum arcu quis sem pellentesque vehicula. Praesent at tortor at justo ultrices tempus. Nam volutpat feugiat sapien. Aenean rutrum ullamcorper augue, et faucibus enim hendrerit in.</p>
<p>Donec fermentum orci id nisl imperdiet pulvinar. Sed dolor lacus, pretium vitae magna sed, laoreet rhoncus ipsum. Ut fringilla ullamcorper lectus at mollis. In lobortis ac sem ut hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum aliquet urna ac sapien blandit ullamcorper. Integer gravida, risus a dictum pulvinar, eros ante pharetra purus, quis porta enim massa in nisl. Sed fringilla mauris sit amet nibh dapibus, vitae aliquam elit tempor. Vestibulum vitae diam ante. Cras hendrerit porta diam eget dapibus. Nam aliquet dolor in justo feugiat luctus. Nunc sit amet condimentum nibh. Pellentesque dignissim orci eros, euismod mollis turpis tempor et. In hac habitasse platea dictumst. Nullam pretium fringilla urna ac rhoncus. Vivamus odio dolor, sodales a euismod in, consequat tempor tellus.
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
</p>
<!-- // page content -->
</div>
<div class="col-lg-4 col-md-5 col-sm-6" >
<div class="sponsor" >
<!-- ads or sub-nav -->
<!-- // ads or sub-nav -->
</div>
</div>
</div>
</div>
<footer>
<div class="row" >
<div class="col-lg-12" >
<ul class="list-unstyled" >
<li class="pull-right" ><a href="#top" >Back to top</a></li>
<li></li>
</ul>
</div>
</div>
</footer>
</div>
【问题讨论】：
相同的原则 - 但好奇有一个引导程序特定的解决方案来解决他们的问题。应该要 JS 修复一个 CSS 问题。 不，没有，它基本上被关闭为Wont fix：github.com/twbs/bootstrap/issues/1768#issuecomment-3908793 【参考方案1】：Darryl Hein 在重新发布的帖子中的回答效果很好 - 没有 JS。
HTML position:fixed page header and in-page anchors
【讨论】：
以上是关于Bootstrap Nav使命名链接在导航栏下滚动[重复]的主要内容，如果未能解决你的问题，请参考以下文章