Bootstrap导航栏被覆盖、hero区块溢出及服务区块图片适配问题求助

问题1：导航栏被下方区块覆盖 #

核心原因 #

• 你自定义的.container类和Bootstrap原生container类重名，你给自定义类加了top: -49px属性，将整个hero区块向上偏移覆盖了导航栏
• 强行修改导航栏z-index为-1会让导航层级低于页面主体，自然无法交互

修复步骤 #

1. 将你自定义的容器类重命名为.custom-container，避免和Bootstrap原生类冲突
2. 删除.custom-container（原.container）中的top: -49px属性
3. 如果使用固定定位导航，给body加padding-top: 56px（Bootstrap导航默认高度）即可，无需调整z-index

问题2：hero区块溢出、padding/margin修改不生效 #

核心原因 #

• HTML标签嵌套错误：你将<main>的闭合标签放在了</section>前面，浏览器解析DOM结构异常，样式无法正确生效
• 你给.container加了min-height: 102vh属性，强制容器高度超过一屏，自然会溢出到下一区块
• .hero类设置了固定高度height: 50px，远小于内容实际高度，导致内容溢出

修复步骤 #

1. 修正标签嵌套：将</main>移动到</section>（hero区块结束标签）的后面，正确包裹所有主体内容
2. 删除.custom-container中的min-height: 102vh属性，或者根据需求调整为合适的高度
3. 删除.hero类中的固定height: 50px属性，让内容自动撑开容器高度，或者改用min-height设置最小高度
4. 重命名容器类后，直接给.hero类添加padding/margin属性即可生效

问题3：服务区块图片无法适配容器 #

核心原因 #

• 你给.icon img加了left: 425px的相对定位，强制将图片偏移到容器外部
• 图片没有设置自适应属性，不会随父容器缩放
• .service-item中的display: fleq为拼写错误，正确应为display: flex，导致弹性布局失效

修复步骤 #

1. 删除.icon img中的left: 425px属性
2. 给图片添加全局自适应样式：

img {
  max-width: 100%;
  height: auto;
}

3. 将.service-item中的display: fleq修正为display: flex
4. 给.service-item添加position: relative属性，否则你写的::after遮罩会相对于整个视口定位，无法适配当前容器

其他需修正的代码问题 #

• 关闭多余的<h1>标签：hero区块内两处h1都多写了一个开放标签，修正为正确的嵌套结构
• 删除全局*选择器中的font-size: 21px属性，避免覆盖Bootstrap的默认字体样式导致布局错乱
• 你给body同时设置了margin:0和margin:8px，后者会覆盖前者，保留需要的即可

内容的提问来源于stack exchange，提问作者JP Codes