如何将 HTML ID 链接与 Bootstrap navbar-header 一起使用？答案

【问题标题】：How can I use HTML ID links with the Bootstrap navbar-header?如何将 HTML ID 链接与 Bootstrap navbar-header 一起使用？
【发布时间】：2012-07-16 23:04:12
【问题描述】：

在我的 Rails 应用程序中，我正在尝试构建一个简单的常见问题解答页面，该页面有一个侧边栏，当您单击某个主题时，它会向下移动到该问题。

所以我在侧边栏中的一段代码看起来像：

<li><a href="#work">How does it work?</a></li>

然后我有一个与 id="work" 匹配的 h2。

当我测试它时，它一直在超调，我想是因为它从页面的最顶部开始显示内容，该页面被 Bootstrap 中的导航栏隐藏。解决这个问题的最佳方法是什么？

【问题讨论】：

标签： javascript jquery ruby-on-rails-3 html twitter-bootstrap

【解决方案1】：

有同样的问题。这是我想出的：

// listen for click events originating from elements with href starting with #
$('body').on('click.scroll-adjust', '[href^="#"]', function (e) {
  var $nav

  // make sure navigation hasn't already been prevented
  if ( e && e.isDefaultPrevented() ) return

  // get a reference to the offending navbar
  $nav = $('div.navbar')

  // check if the navbar is fixed
  if ( $nav.css('position') !== "fixed" ) return

  // listen for when the browser performs the scroll
  $(window).one('scroll', function () {
    // scroll the window up by the height of the navbar
    window.scrollBy(0, -$nav.height())
  });

});

【讨论】：

如果我有一个自定义的固定导航栏，我该怎么做呢？ +1

【解决方案2】：

我完全使用 CSS/HTML 标记解决了这个问题 - 根据您的结构，这可能适合您，也可能不适合您。

首先，我在导航栏中引用的每个元素都是一个 div，因为我的页面被分成多个部分，每个 dav 都有 container 类，所以页面结构是：

<body>
 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">  
       <ul class="nav">
         <li class="active"><a href="#one">one</a></li>
         <li><a href="#two">two</a></li>
         <li><a href="#three">three</a></li>
         <li><a href="#four">four</a></li>
         <li><a href="#five">five</a></li>
       </ul>
     </div>
   </div>
 </div>

 <div class="container" id="one">  
   <h1>One</h1>
 </div>

 ...

 <div class="container" id="five">  
   <h1>Five</h1>
 </div>

文档建议您将正文至少填充 40 像素以补偿导航栏，这很好 - 但它只会在页面位于顶部时将内容向下推。正如您所做的那样，我发现从静态导航栏到页面上# 锚点的任何链接都在页面上太高了。

我的解决方案是填充每个锚定元素的顶部，因此我将以下 CSS 添加到我的页面 CSS（在标准引导程序和响应式样式表之间加载）：

.container {
  padding-top:  60px;
}

这显然在我的页面上的每个部分之间增加了空间，但这在我的布局中实际上很有用。

值得记住的是，由于顶部也有此填充，因此无需将填充应用到 <body> 标记的顶部。

【讨论】：