如何将HTML ID链接与Bootstrap navbar-header一起使用？
在我的rails应用程序中，我正在尝试构建一个简单的FAQ页面，其中有一个侧边栏，当您单击某个主题时，它会向下移动到该问题。
因此，侧边栏中的一段代码如下所示：
How does it work? 然后我有一个匹配的h2与id =“work”。
当我测试它时它会保持超调，我认为因为它显示的内容从页面顶部开始，这是由Bootstrap中的导航栏隐藏的。 解决这个问题的最佳方法是什么？
有同样的问题。 这就是我想出的：
// 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()) }); });
我使用CSS / HTML标记完全修复了这个问题 – 根据您的结构，这可能适用于您，也可能不适合您。
首先，我在Navbar中引用的每个元素都是div，因为我的页面被分成几个部分，每个dav都有类container所以页面结构是：
One
... Five
文档建议你将身体填充至少40px以补偿导航栏，这很好 – 但它只会在页面位于顶部时将内容向下推。 我发现，正如您所做的那样，从静态导航栏到页面上#锚点的任何链接都太高了。
我的解决方案是填充每个锚定元素的顶部，因此我将以下CSS添加到我的页面CSS（标准引导程序和响应式样式表之间的加载）：
.container { padding-top: 60px; }
这显然在我的页面上的每个部分之间增加了空间，但这在我的布局中实际上很有用。
值得注意的是，因为顶部也有这个填充，所以不需要在标签的顶部应用填充。