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
我试图完全复制引导程序示例，但仅在使用navbar fixed top时仍然存在此问题.我在做什么错了?
i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. what am I doing wrong?
推荐答案
您的答案就在 docs :
需要身体填充
除非将
padding添加到<body>的顶部，否则固定的导航栏将覆盖您的其他内容.试用您自己的值或使用下面的代码段.提示:默认情况下，导航栏的高度为50px.
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屋！
