Bootstrap 4 固定导航栏重叠主体

Question

现在 [几乎] 一切都基于 rems，导航栏似乎有一些时髦的高度属性。一方面，导航栏高度是可变的，而顶部和底部的填充是静态的 8px。

由于导航栏的伪动态特性，简单地将 body 的 padding-top 设置为 50px 不再有效。如果用户更改字体大小，栏高将不再是 50px。

有没有人想出如何在滚动到页面顶部时为正文提供适当的填充量以使其恰好位于导航栏下方？

如果必须使用 jQuery 来完成这似乎是一种倒退，但也许这是唯一的方法。

示例代码：

body {
  padding-top: 54px;
  background-color: blue;
}

div.container-fluid {
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top navbar-dark bg-inverse container">
  <a href="www.google.com" class="navbar-brand">google.com</a>
</nav>

<div class="container-fluid">
  <p>I am content that is getting overlapped by the navbar!</p>
</div>

请注意条形图在某些字体大小下是如何重叠的，而在其他字体大小下则存在间隙。在 Mac OS X 上，您可以使用 command+minus 和 command+plus

更改字体大小

编辑：我在 bootstrap 4 github 页面上提出了一个问题。该错误已确认，但它可能超出范围，因为它们通常不支持缩放效果。

Answer 1

我可以确认 chrome 的问题。缩放时导航栏的计算高度会发生变化。前面的结果导致缩放级别为 125% 和 175%，见下图：

对于 125%，导航栏的计算高度 = 53.6 (37.6 + 8*2) 而不是 54。可能相关：Is Chrome rounding media query em units wrong?

Bootstrap 4 固定导航栏重叠主体

Bootstrap 4 fixed navbar overlaps body

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4