Bootstrap导航栏展开时被截断问题（附演示视频）

问题分析 #

Navbar在桌面端功能正常，但移动端点击展开后菜单被截断，仅显示最后一项，这类问题通常由布局冲突、样式覆盖或资源引入异常导致。

解决方案 #

1. 修复背景图样式冲突

你给body设置的background-attachment: fixed和position: relative会干扰Bootstrap下拉菜单的层级渲染，建议将背景图移至#root容器，避免全局布局影响：

/* public/index.html 中修改样式 */
#root {
    background-image: url(../../assets/myImg/baking_background.jpg);
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
}
/* 移除body的背景相关样式 */
#body_id {
    position: relative;
}

2. 统一Bootstrap资源引入方式

避免同时混用npm安装和CDN引入，防止版本冲突或重复加载。推荐使用npm方式，并简化引入逻辑（bootstrap.bundle.min.js已集成Popper.js，无需单独引入）：

// src/index.js 修改后
import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'

import 'jquery';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

ReactDOM.render(<App />, document.getElementById('root'))

3. 修正React中class属性的错误用法

React中必须用className替代原生HTML的class属性，否则可能导致样式应用异常：

// app/index.js 修改后
function App() {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <a className="navbar-brand" href="/">Navbar</a>
      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item active">
            <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
          </li>
        </ul>
      </div>
    </nav>
  )
}

export default App

4. 检查父元素的overflow属性

确保Navbar的所有父元素（包括#root、body）未设置overflow: hidden，否则下拉菜单会被容器截断，如有此类自定义样式需移除或调整。

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