Bootstrap固定导航栏移动端展开遮挡内容的解决方法咨询

需要实现移动端场景下Bootstrap navbar展开后不遮挡body内容的效果，同时提升移动端适配性。

现有代码片段 #

<header>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">AT Products LLC</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-expanded="true">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse show" id="collapsibleNavbar" style="">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="/">AT Products</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Products</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
                <li><a class="dropdown-item" href="/flash">Flash Documentation</a></li>
                <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
                <li><a class="dropdown-item" href="/mdickie">MDickie Projects</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="true">Communities</a>
              <ul class="dropdown-menu show" data-bs-popper="none">
                <li><a class="dropdown-item" href="/ehs">Ethical Hacking Society</a></li>
                <li><a class="dropdown-item" href="/script">The Script Community</a></li>
                <li><a class="dropdown-item" href="/codinghome">CodingHome</a></li>
                <li><a class="dropdown-item" href="/noodle">Noodle Hackerspace</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Documentation</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/terms">Terms of Service</a></li>
                <li><a class="dropdown-item" href="/discord">Discord Rules</a></li>
                <li><a class="dropdown-item" href="Privacy">Privacy Policy</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
</header>

<body>
Body of the page
</body>
<style>
    header {
       position: fixed;
       top: 0;
       right: 0; 
       left: 0;
       z-index: 1030;
    }
    
    body {
        padding-top: 56px;
    }
</style>

方法1：动态调整body内边距 #

当前body的padding-top是固定值，navbar展开后高度增加会遮挡内容。通过监听Bootstrap折叠事件，动态修改内边距：

const navbarCollapse = document.getElementById('collapsibleNavbar');
const body = document.body;

// 展开时调整内边距
navbarCollapse.addEventListener('shown.bs.collapse', () => {
  const navbarHeight = document.querySelector('header').offsetHeight;
  body.style.paddingTop = `${navbarHeight}px`;
});

// 折叠后恢复原内边距
navbarCollapse.addEventListener('hidden.bs.collapse', () => {
  body.style.paddingTop = '56px';
});

方法2：改用Sticky定位替代Fixed定位 #

将header的position: fixed改为position: sticky，这样navbar保持顶部的同时，展开时会占据文档流空间，自动向下推送body内容：

header {
   position: sticky;
   top: 0;
   right: 0; 
   left: 0;
   z-index: 1030;
}

body {
    padding-top: 0; /* 移除固定内边距 */
}

方法3：移动端适配优化细节 #

• 优化下拉菜单触摸体验：确保点击区域足够大，避免误触

.dropdown-item {
    padding: 12px 16px;
}

• 关闭navbar时自动收起下拉菜单：避免展开状态残留

const navbarToggler = document.querySelector('.navbar-toggler');
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');

navbarToggler.addEventListener('click', () => {
  dropdownToggles.forEach(toggle => {
    if (toggle.getAttribute('aria-expanded') === 'true') {
      toggle.click();
    }
  });
});

• 小屏适配：添加flex-wrap让品牌和切换按钮在空间不足时换行

<nav class="navbar navbar-expand-sm bg-dark navbar-dark flex-wrap">

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