为什么我在Codesandbox中使用的Bootstrap无法正常生效？

方式一：模块化依赖引入（适配React/Vue等工程化项目） #

• 点开Codesandbox左侧的「Dependencies」依赖管理面板
• 搜索bootstrap，点击添加官方稳定版依赖
• 在项目入口文件（你当前项目的入口为/src/index.js）顶部加入引入代码：

// 引入Bootstrap核心样式文件
import 'bootstrap/dist/css/bootstrap.min.css';
// 若需要使用Bootstrap带交互的组件（如下拉菜单、模态框），额外引入JS文件
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

方式二：CDN引入（适配静态HTML项目，无需安装依赖） #

• 打开项目的public/index.html文件
• 在<head>标签内插入Bootstrap官方提供的最新样式CDN链接
• 若需要JS交互能力，在<body>标签结束前插入对应Bootstrap JS CDN链接即可

图片样式错乱/尺寸过大修复方法 #

针对你反馈的图片尺寸过大、样式错乱问题，引入Bootstrap后可直接使用内置类名快速修复：
给需要适配的图片加上img-fluid类名，即可实现响应式自适应，自动将图片最大宽度限制为父容器宽度，不会溢出：

<img src="你的图片路径" class="img-fluid" alt="图片说明">

常见失效排查点 #

• 检查是否存在自定义样式优先级高于Bootstrap样式导致覆盖的情况，可打开浏览器控制台的元素检查面板，对应元素的样式列表中查看Bootstrap规则是否被划掉
• 若使用的是React Bootstrap、BootstrapVue等框架封装的Bootstrap组件库，需单独安装对应库的依赖，不能直接引入原生Bootstrap文件

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