React Bootstrap Navbar元素纵向堆叠无法单行显示问题

问题根源 #

你当前的组件写法本身没有错误，出现导航元素逐行纵向堆叠、样式不符合官方效果的核心原因是：只安装导入了react-bootstrap组件逻辑，没有引入Bootstrap框架的核心CSS样式文件。
react-bootstrap本身不带内置样式，所有组件的布局、排版、交互样式都依赖原生Bootstrap的CSS规则，缺失该文件时浏览器会按照默认块级元素规则渲染所有导航项，自然会出现纵向排列的问题。

修复步骤 #

• 安装bootstrap依赖包，在项目根目录终端执行对应包管理命令：

# npm 用户执行
npm install bootstrap

# yarn 用户执行
yarn add bootstrap

• 打开项目的React入口文件（通常是src/index.js/src/main.jsx，即调用ReactDOM.createRoot挂载根组件的文件），在文件最顶部全局引入Bootstrap的CSS文件：

// 放在所有其他组件、样式引入的最前面
import 'bootstrap/dist/css/bootstrap.min.css';

注意：该CSS文件只需要全局引入一次，不需要在每个使用react-bootstrap组件的文件中重复引入。引入完成后保存刷新页面，现有Navbar代码不需要做任何修改，就能正常渲染出横向排列的官方默认导航栏效果。

效果对比 #

• 错误渲染效果：
  
• 预期正确效果：
  

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