为什么我的网站页面主题位于导航栏（引导程序）后面？
我尝试查看当我单击导航栏时我想查看该主题，但它在导航栏下显示该主题。我尝试给予保证金，但没有效果。有人帮助我如何解决这个问题。
there is code: https://codepen.io/rero34/pen/mdqGyVo
I try to see when I click navbar then I want to see the topic, but it is showing the topic under navbar. I try to give margin, but it doesn't work. Is someone help me with how can I solve this problem.
there is code: https://codepen.io/rero34/pen/mdqGyVo
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
所以你正在使用 Bootstrap，这很棒。但我的第一印象是你有太多的手动样式，尤其是使用 CSS 框架。无需过度解释，您的锚点未从该部分的顶部开始的主要原因是因为您的 id 是从跨度开始的，这不是该部分的开头。您应该将
id放在各个部分本身上。然后，下一个问题来自于在章节上使用填充以及标题上过多的边距。在不仔细检查和清理所有这些内容的情况下，让我们看看解决方法。
我添加了一些
scroll-margin-top每个部分。我发现大约5.5em是您的情况的最佳位置。您的代码对于堆栈片段来说字符太多，因此请查看 CodePen。
So you are using Bootstrap which is great. But my first impression was you have too many manual styles going on, especially for using a CSS framework. Without over-explaining it, the main reason your anchors aren't starting at the top of the section is because your
id's are starting at the span, which is not the start of the section. You should put theid's on the sections themselves.Then, the next issue comes from the use of padding on your sections and excessive margins on headings. Without going through and cleaning all of those up, let's look at ways around it.
I added some
scroll-margin-topon each section. I found that roughly5.5emis the sweet spot in your case.Your code has too many characters for a stack snippet, so take a look in the CodePen.
我认为这是使用固定导航栏的自然 z-index 副作用。看看将
margin-top添加到紧跟在导航栏后面的元素是否有区别。这似乎是div id="myCarousel"。您添加的边距应与导航栏的高度相同“px”。I think it is a natural z-index side-effect of using a fixed navbar. See if it makes a difference to add
margin-topto the element immediately following the navbar. That seems to bediv id="myCarousel". The margin you add should be the same 'px' tall as your navbar.因为在
_robot.css文件中设置了margin-top: 0;。对于第三级标题标签。您可以使用
H3标记的自定义样式来克服此默认设置，以设置适当的margin-top: 100px !important;。根据您的需要定制它，我将 100px 作为随机值。编辑
我发现您多次定义了
h3的margin-top。可能是有冲突导致的。您的风格的下一次出现是在稍后的时间Because there is set the
margin-top: 0;in the_robot.cssfile. for the 3rd-level header tag.You can overcome this default settings with your custom style of the
H3tag to set the appropriatemargin-top: 100px !important;. Customize it to your needs, I take the 100px as random value.Edit
I found you have the
margin-topforh3defined several times. There might be the conflict which cause it. Next occurenc in your style is later in