如何实现Bootstrap 4右侧滑入菜单推送页面内容的侧滑效果？

我来帮你搞定这个需求——你的现有代码用了绝对定位让菜单脱离了文档流，所以页面主体根本不会被“推”动。下面是完整的可运行方案，适配移动端，完美实现菜单从右滑入+主体推送的效果：

完整HTML结构 #

首先确保你的页面结构包含导航栏和主体内容：

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">你的品牌</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobileMenu" aria-controls="mobileMenu" aria-expanded="false" aria-label="切换菜单">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="mobileMenu">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">功能</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">已禁用</a>
      </li>
    </ul>
  </div>
</nav>

<!-- 页面主体内容 -->
<main class="page-content">
  <div class="container py-5">
    <h1>页面主体内容</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</main>

修正后的CSS样式 #

核心是调整菜单定位方式，同时给主体添加同步过渡：

/* 给主体内容添加过渡动画，确保和菜单滑动同步 */
.page-content {
  transition: transform 0.3s ease-in-out;
}

/* 移动端专属样式（屏幕宽度≤768px） */
@media (max-width: 768px) {
  /* 导航栏设为相对定位，作为菜单的参考容器 */
  .navbar {
    position: relative;
    z-index: 1000; /* 确保菜单在主体上方 */
  }

  /* 重置Bootstrap默认的折叠菜单样式 */
  .navbar-collapse {
    position: fixed;
    top: 54px; /* 和导航栏高度一致，避免重叠 */
    right: 0;
    width: 80%; /* 菜单宽度，可根据需求调整 */
    height: calc(100vh - 54px); /* 菜单高度占满剩余屏幕 */
    background-color: #ffffff; /* 菜单背景色，和导航栏统一 */
    padding: 1.5rem;
    transform: translateX(100%); /* 默认状态下菜单完全移出视口右侧 */
    transition: transform 0.3s ease-in-out;
    overflow-y: auto; /* 菜单内容过多时允许滚动 */
    box-shadow: -2px 0 10px rgba(0,0,0,0.1); /* 给菜单加个阴影，增强层次感 */
  }

  /* 菜单展开时的状态：滑入视口 */
  .navbar-collapse.show {
    transform: translateX(0);
  }

  /* 菜单展开时，主体内容向左移动菜单宽度，实现推送效果 */
  .navbar-collapse.show ~ .page-content {
    transform: translateX(-80%);
  }

  /* 调整菜单内的导航项为垂直排列 */
  .navbar-nav {
    flex-direction: column;
    gap: 1rem; /* 给导航项之间加间距 */
  }
}

关键修改点说明 #

• 移除绝对定位：把菜单从position: absolute改成position: fixed，既保证菜单不影响主体布局，又能覆盖在页面上方。
• 用transform实现滑动：相比修改left属性，transform: translateX()的过渡动画更流畅，性能也更好。
• 主体同步过渡：通过兄弟选择器~监听菜单的show类，让主体同步向左移动菜单宽度，完美实现推送效果。
• 细节优化：添加菜单滚动、阴影、导航项间距，提升用户体验。

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