Code Sandbox中React应用样式与本地Chrome浏览器显示效果不一致

• 检查Bootstrap依赖与引入配置
  本地项目未安装Bootstrap依赖、或未在入口文件（通常为src/index.js/src/main.jsx）引入Bootstrap样式是最常见的问题。先执行npm install bootstrap安装对应依赖，再在入口文件顶部添加引入代码import 'bootstrap/dist/css/bootstrap.min.css'即可。
• 核对样式引入顺序
  Bootstrap的样式文件必须在你自定义的CSS文件之前引入，否则你写的覆盖样式会被Bootstrap默认样式覆盖，CodeSandbox默认的引入顺序可能和本地项目的引入顺序存在差异，调整顺序即可修复。
• 检查CSS模块化配置
  如果你使用了后缀为.module.css的模块化样式文件，需要确认本地项目的构建配置（如webpack、vite配置）是否开启了CSS模块化支持，同时检查类名调用方式是否和CodeSandbox中一致，避免类名编译不匹配导致样式失效。
• 补充视口meta标签
  打开本地项目public/index.html文件，确认<head>标签内是否添加了Bootstrap响应式依赖的视口配置：<meta name="viewport" content="width=device-width, initial-scale=1" />，缺少该标签会导致响应式样式完全失效。
• 统一Bootstrap版本
  核对CodeSandbox和本地项目package.json中Bootstrap的版本号，大版本差异（如Bootstrap4和Bootstrap5）会导致大量类名不兼容，将本地版本调整为和CodeSandbox一致即可。
• 排查全局样式冲突
  本地项目脚手架（如create-react-app、vite-react模板）自带的全局默认样式可能和你写的样式、Bootstrap样式冲突，将CodeSandbox中的全局样式文件和本地的全局样式文件做比对，删除冲突的样式规则即可。

内容的提问来源于stack exchange，提问作者Miss. Tea