twitter bootstrap 导航栏固定顶部重叠站点 [英] twitter bootstrap navbar fixed top overlapping site
问题描述
我在我的网站上使用引导程序，但导航栏固定顶部有问题.当我只使用常规导航栏时，一切都很好.但是，当我尝试将其切换到固定顶部导航栏时，网站上的所有其他内容都会向上移动，就像导航栏不存在并且导航栏重叠一样.这基本上是我的布局方式:
I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the navbar isn't there and the navbar overlaps it. here's basically how i laid it out:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我试图完全复制引导程序示例，但仅在使用导航栏固定顶部时仍然存在此问题.我做错了什么?
i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. what am I doing wrong?
推荐答案
你的答案在 文档:
固定导航栏将覆盖您的其他内容，除非您将 padding 添加到 的顶部.尝试您自己的价值观或使用我们下面的代码片段.提示:默认情况下，导航栏的高度为 50 像素.
Body padding required
The fixed navbar will overlay your other content, unless you add
paddingto the top of the<body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
确保在核心 Bootstrap CSS 之后包含此内容.
Make sure to include this after the core Bootstrap CSS.
在Bootstrap 4 文档中...
固定导航栏使用位置:固定，这意味着它们是从DOM 的正常流程，可能需要自定义 CSS(例如，padding-top在 ) 上以防止与其他元素重叠.
Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements.
这篇关于twitter bootstrap 导航栏固定顶部重叠站点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
