html – 为什么我必须在Bootstrap中使用固定位置顶部导航栏时添

发布时间：2020-12-14 18:32:00 所属栏目：资源来源：网络整理

导读：我正在使用最新版本的Bootstrap来设计一个网站,我遇到了一个看似错误的东西.你可以 view it here作为JSFiddle. 如果我添加一个标准的固定位置顶部导航栏然后添加一些内容,后续内容会被拉高约60px,因此最终会在顶部导航栏下面.所以我查看了Bootstrap examples

我正在使用最新版本的Bootstrap来设计一个网站,我遇到了一个看似错误的东西.你可以 view it here作为JSFiddle.

如果我添加一个标准的固定位置顶部导航栏然后添加一些内容,后续内容会被拉高约60px,因此最终会在顶部导航栏下面.所以我查看了Bootstrap examples pages并发现了一些内联CSS(在head部分中)显然用于纠正这个问题：

body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

这让我感到非常惊讶,我想知道这是否是Bootstrap中一个被忽视的错误的结果,或者我是否应该这样做.

如果是后者,我会非常有兴趣知道为什么我应该在Bootstrap应该是一个随时可用的CSS解决方案时使用内联CSS.

如果是前者,我非常想知道为什么会这样 – 为什么Bootstrap CSS只是将填充添加到导航栏的底部或者什么？

解决方法

从 documentation：

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

.navbar-fixed-top的位置是固定的,因此填充不会影响任何其他元素.

编辑

“两个.css之间”的建议有助于防止移动设备出现问题.由于位置：固定在许多设备上被破坏,导航栏变为静态,而< body> padding在顶部创建一个空白换行.因此bootstrap-responsive.css会覆盖该视口的此填充.

您只需向规则添加媒体查询即可重现该行为：

@media (min-width: 979px) {
    body {
        padding-top: 60px;
    }
}

在自定义样式表中包含此规则,并忘记< style>标签.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!