Bootstrap 4固定导航栏重叠主体答案

【问题标题】：Bootstrap 4 fixed navbar overlaps bodyBootstrap 4固定导航栏重叠主体
【发布时间】：2016-03-13 15:29:43
【问题描述】：

现在 [几乎] 一切都基于 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 页面上提出了一个问题。该错误已得到确认，但它可能超出范围，因为它们通常不支持缩放效果。

【问题讨论】：

您好，理论上的解释对编码问题帮助不大。您可以发布您正在处理的代码吗？
@ManojKumar 示例代码添加了更多解释
嗯，我在 Windows 7、Firefox 42 中看不到任何重叠。从逻辑上讲，当前代码不会有任何重叠。
@ManojKumar 嗯，也许这是 chrome 的问题。使用 chrome 检查器和计算选项卡时，我可以清楚地看到导航栏的高度在我增加或减少字体大小时发生变化。
我为您将代码封装在 ja jsfiddle example 中。

标签： css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

【解决方案1】：

我可以确认您的 chrome 问题。缩放时导航栏的计算高度会发生变化。上述结果导致缩放级别为 125% 和 175%，如下所示：

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

【讨论】：

我已经确认Safari也存在这个问题。