为什么我的网站页面主题 behindnavbar (bootstrap)？

Question

我尝试查看当我单击导航栏时我想查看主题，但它显示的是导航栏下的主题。我试着给保证金，但它不起作用。有人帮我解决这个问题吗？

Web site showing like that

But I want to see like that

there is code: https://codepen.io/rero34/pen/mdqGyVo

Answer 1

因为在_robot.css文件中设置了margin-top: 0;。对于第 3 级 header 标签。

您可以使用 H3 标签的自定义样式克服此默认设置，以设置适当的 margin-top: 100px !important;。根据您的需要自定义它，我将 100px 作为随机值。

    h3{
       font-weight: 700;
       margin-bottom: 50px;    
       margin-top: 100px !important;
    }

编辑我发现您多次定义了 margin-top for h3。可能存在导致它的冲突。下一次出现您的风格是在

之后

    .services h3{
      margin-top: 80px;
    }

Answer 2

我认为使用固定导航栏是很自然的 z-index side-effect。看看将 margin-top 添加到紧跟在导航栏之后的元素是否会有所不同。那好像是div id="myCarousel"。您添加的边距应与导航栏的高度相同 'px'。

Answer 3

所以您正在使用 Bootstrap，这很棒。但我的第一印象是您使用了太多手动样式，尤其是使用 CSS 框架时。没有 over-explaining 它，您的锚点没有从该部分的顶部开始的主要原因是因为您的 id 是从跨度开始的，这不是该部分的开始。您应该将 id 放在这些部分本身。

然后，下一个问题来自在您的部分中使用填充和在标题中使用过大的边距。无需仔细检查和清理所有这些，让我们看看解决方法。

scroll-margin is used to adjust an element’s snap area (the box that defines where the element will be snapped to).

我在每个部分添加了一些 scroll-margin-top。我发现大致 5.5em 是您的最佳选择。

您的代码对于堆栈片段来说字符太多，因此请查看 CodePen。

why my site page topic behindnavbar (bootstrap)?