Question

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

由于导航栏的伪动态特性，只需将主体的填充顶部设置为50px就不再有效了。如果用户更改其字体大小，则条形高度将不再是50px。

当滚动到页面顶部时，是否有人想出如何为身体提供适当数量的填充以使其完全保持在导航栏下方？

如果必须使用jQuery来实现这一点，这似乎是一种回归，但也许这是唯一的方法。

示例代码：

＆＃13;

body {
  padding-top: 54px;
  background-color: blue;
}

div.container-fluid {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

请注意条形图在某些字体大小上是如何重叠的，并且在其他尺寸上存在间隙。在Mac OS X上，您可以使用命令+ minus和命令+ plus

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

Answer 1

我可以确认你的问题。缩放时导航条的计算高度会发生变化。前面的结果是缩放级别为125％和175％的差距，见下文：

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

Bootstrap 4固定导航栏与身体重叠

1 个答案: