Fixed-Top导航栏移动端遮挡页面顶部内容问题求助

你当前的CSS在移动端将body的padding-top设为0，这正是导致导航栏遮挡内容的核心原因。Fixed-Top导航栏是脱离文档流固定在视口顶部的，无论PC还是移动端，都需要给页面内容预留足够的顶部空间来避免被遮挡。

修正后的CSS方案 #

将移动端的padding-top调整为适配移动端导航栏高度的值（Bootstrap默认移动端navbar高度为56px）：

body {
  padding-top: 60px;
  margin: 0;
}
@media (max-width: 979px) {
  body {
    padding-top: 56px; /* 匹配移动端导航栏高度 */
  }
}
.container-fluid{
    margin: 0;
}

更灵活的替代方案 #

如果不想硬写固定高度，也可以直接给页面主体容器（比如你的.header）添加顶部内边距：

.header {
  padding-top: 60px;
}
@media (max-width: 979px) {
  .header {
    padding-top: 56px;
  }
}

这种方式能确保导航栏无论展开还是折叠，页面内容都不会被遮挡。

原方案失效原因 #

你之前在移动端把body的padding-top设为0，而Fixed-Top导航栏不占据文档流空间，页面顶部内容会直接移动到导航栏下方，最终导致被遮挡。只要保持移动端也有足够的顶部内边距，就能解决问题。

内容的提问来源于stack exchange，提问作者Deepti Sheoran