Bootstrap固定Header与Section适配问题：多设备下Section被遮挡

问题分析 #

使用fixed-top类的Header会脱离文档流，固定padding-top: 80px仅能适配特定屏幕下的Header高度，但Header在平板等设备中因内容布局变化（元素换行、尺寸调整）导致高度改变，固定值无法适配所有场景，最终出现Section被遮挡的情况。

解决方案 #

方案1：动态计算Header高度适配Section #

通过JavaScript实时获取Header实际高度，赋值给Section的padding-top，同时监听窗口尺寸变化，确保所有设备下Section都能贴合Header下方：

// 获取目标元素
const header = document.querySelector('header.fixed-top');
const section = document.querySelector('.section');

// 定义设置内边距的函数
function adjustSectionPadding() {
  const headerHeight = header.offsetHeight;
  section.style.paddingTop = `${headerHeight}px`;
}

// 页面初始化时执行
adjustSectionPadding();
// 监听窗口 resize 事件，实时更新
window.addEventListener('resize', adjustSectionPadding);

方案2：CSS变量+媒体查询适配已知断点 #

如果你能确定Header在不同屏幕断点下的高度，可通过CSS变量结合Bootstrap断点设置对应内边距：

:root {
  --header-height: 80px;
}

/* 平板设备（Bootstrap md断点，≤991px） */
@media (max-width: 991px) {
  :root {
    --header-height: 120px; /* 根据实际Header高度调整 */
  }
}

/* 手机设备（≤767px） */
@media (max-width: 767px) {
  :root {
    --header-height: 150px; /* 根据实际Header高度调整 */
  }
}

.section {
  margin: 0;
  padding: 0;
  padding-top: var(--header-height);
}

方案3：优化Header布局减少高度变化 #

调整Header内元素布局，避免因设备尺寸变化导致Header高度突变，比如将垂直堆叠的badge改为弹性布局：

<!-- 修改Header内的badge容器 -->
<div class="d-flex flex-wrap align-items-center gap-3">
  <div class="badge bg-primary text-wrap">
    <p>{{(datosEmpresaTaller | async).empresa}}</p>
  </div>
  <div class="badge bg-primary text-wrap">
    <p>{{(datosEmpresaTaller | async).taller}}</p>
  </div>
</div>

这样平板及以上设备中badge会横向排列，避免垂直堆叠导致Header高度增加，固定padding-top的适配性会大幅提升。

验证建议 #

• 测试PC、平板、手机等不同屏幕尺寸，确认Section始终处于Header下方
• 使用JS方案时，需确保页面初始化和窗口尺寸变化时都能正确触发计算

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