Question

所以我正在使用Bootstrap中的布局（see here）将一个页面网站拆分成不同的内容部分。我希望每个部分都能填充导航栏下方的屏幕。我也使用Bootstraps固定导航栏navbar-fixed-top。我已经按照Bootstrap的建议在<body>

的顶部添加50px填充

  body {
    padding-top: 50px;
  }

应该考虑隐藏在固定导航栏下方的每个部分的部分。

我遇到的问题是页面加载一切正常（每个部分填满屏幕）但是，如果我点击导航中的任何菜单项 - 相应的<section id>默认返回隐藏导航栏下方部分的一部分。我最终得到的每个部分从视口底部大约50px结束。

有什么想法吗？

Answer 1

为什么不将padding-top:50px添加到每个部分而不是body

问题与你使用每个部分的id作为锚引用的事实有关，所以它被推到了身体的顶部 - 另一种方法是给每个部分{{1然后使用position:relative向每个锚元素添加并使用这些元素进行导航。

Answer 2

应用此CSS

body{
    padding-top: 50px;
    webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}