Vue3如何让Bootstrap导航栏折叠时悬浮在内容上方不挤压布局

解决方案 #

这个问题和Vue3本身无关，是Bootstrap导航栏默认处于正常文档流中，折叠菜单展开时会占用页面高度，才会挤压下方内容。你可以通过修改样式实现悬浮效果，具体修改如下：

1. 修改 Navbar.vue 组件

首先给nav标签添加Bootstrap内置的fixed-top类，让整个导航栏固定在视口顶部，脱离正常文档流。然后给移动端的折叠菜单添加绝对定位，让其展开时悬浮在内容上层：

<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <router-link class="navbar-brand float-left nav-highlight" to="/"></router-link>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav me-auto">
            <li class="nav-item active">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/1">1</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/2">2</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/3">3</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/4">4</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/5">5</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/6">6</router-link>
            </li>
        </ul>
        <ul class="nav navbar-nav me-right">
            <li class="nav-item">
                <router-link class="nav-link nav-highlight me-3 login" to="/login">Sign In</router-link>
            </li>
        </ul>
    </div>
</nav>
</template>

<script>
</script>

<style scoped>
/* 仅在lg断点以下（也就是导航会折叠的移动端视图）生效 */
@media (max-width: 991.98px) {
  #navbarText {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #f8f9fa; /* 和bg-light的默认背景色保持一致 */
    z-index: 999;
    padding: 0.5rem 1rem;
  }
}
</style>

2. 修改 App.vue 样式

因为导航栏已经固定在顶部脱离了文档流，会默认遮挡住页面最顶部的内容，所以需要给根容器添加对应高度的内边距：

<template>
 <div>
  <navbar/>
  <router-view/>
 </div>
</template>

<script>
  import Navbar from "@/components/Navbar.vue";

  export default {
    components: { Navbar },
  };
</script>

<style>
 #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* 数值对应导航栏的实际高度，可自行调整 */
  padding-top: 56px;
 }
</style>

修改完成后移动端折叠菜单展开时就会直接覆盖在下方内容之上，不会再挤压页面移位。

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