Bootstrap navbar移动端不折叠及Footer异常问题求助

一、导航栏折叠功能修复 #

问题点及修复方案 #

• ID不匹配+重复ID：导航容器和折叠面板都用了id="navBar"，且折叠按钮的目标指向不存在的#navbarNav，导致JS无法定位折叠容器。将折叠面板ID改为navbarNav，并修正按钮的目标属性。
• Bootstrap 4属性错误：Bootstrap 4使用data-toggle/data-target属性，而非Bootstrap 5的data-bs-toggle/data-bs-target，前缀错误直接导致交互失效。
• 折叠触发断点错误：navbar-expand类会让导航栏始终保持展开状态，需改为navbar-expand-lg（或md/sm），指定在大屏展开、小屏自动折叠。

修改后的导航栏代码 #

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navBar">
  <div class="container-fluid">
    <a class="navbar-brand" id="heading" href="#">Lift Gym</a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active ml-5 mr-5" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link ml-5 mr-5" href="#">about us </a>
        </li>
        <li class="nav-item">
          <a class="nav-link ml-5 mr-5" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link ml-5 mr-3" href="#">contact us </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

二、Footer异常修复 #

问题点及修复方案 #

• 固定定位与body样式冲突：fixed-bottom会让Footer固定在底部，但body设置的overflow:hidden会隐藏展开的导航栏，clip-path缺少单位导致布局变形。移除overflow:hidden，给clip-path的数值添加单位。
• Footer无内容+样式缺失：空Footer无法正常显示，添加基础内容并调整内边距、文字颜色，确保Footer可见且样式合理。

修改后的代码 #

CSS部分

body{
    background-color: black;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
    url("https://media.istockphoto.com/id/1447561928/photo/fitness-gym-with-men-and-women-doing-plank-strong-and-exercise-for-muscle-cardio-and.jpg?s=2048x2048&w=is&k=20&c=Q5yRQMVSRkl5guXT6CsR_otVuC9l8TmqYKRtFIdfWgo=");
    background-position: left top;
    clip-path: polygon(20px 50%, 100% 0, 100% 100%, 10px 50%); /* 补充单位 */
    background-repeat: no-repeat;
    margin: 0;
    min-height: 100vh;
    /* 移除overflow:hidden，避免隐藏展开的导航栏 */
}

#navBar {
  height: 10vh;
  font-size: 25px;
}

#heading {
    font-size: 35px;
}

#footerStyle{
  background-color: rgb(55, 52, 52);
  padding: 2rem 0; /* 增加内边距，让Footer有高度 */
  color: #fff; /* 添加文字颜色，确保内容可见 */
}

HTML Footer部分

<footer class="mt-5" id="footerStyle">
  <div class="container">
    <p class="text-center">© 2024 Lift Gym. All rights reserved.</p>
  </div>
</footer>

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