在 JSX 中直接用 className 使用 Bootstrap 类名即可生效，前提是 Bootstrap CSS 已成功注入 DOM；常见失效原因包括未加载、版本不匹配、样式覆盖或 Shadow DOM 隔离。
直接在 JSX 中用 className 写 Bootstrap 类名就行
React 不限制你只在全局生效的样式，只要 CSS 文件已加载，className 就能在任意组件、任意元素上起作用。关键不是“能不能局部用”，而是“CSS 是否已注入 DOM”。比如你在 public/index.html 里通过 CDN 引入了 Bootstrap CSS，那所有组件里的 className="btn btn-primary" 都会立即生效。
为什么有时候局部容器里样式不生效
常见原因不是作用域问题，而是以下几点：
- Bootstrap CSS 没真正加载成功（检查浏览器 Network 标签页，看
bootstrap.min.css返回 200） - 你用了 Bootstrap 5 的新类名（如
btn-outline-primary），但项目引入的是 Bootstrap 4 的 CSS - 自定义 CSS 或 CSS-in-JS 库（如 styled-components）把
!important或高优先级选择器覆盖了 Bootstrap 规则 - 组件被包裹在 Shadow DOM（如 Web Components）里，而 Bootstrap CSS 没打进那个 scope
想彻底隔离样式？别用全局类名，改用模块化方案
如果你真需要“仅对某个容器生效”的 Bootstrap 行为（比如避免影响第三方组件），有两条路：
- 用
react-bootstrap或reactstrap：它们导出的是纯 React 组件，样式通过import 'bootstrap/dist/css/bootstrap.min.css'全局加载，但组件行为完全由 React 控制，不会污染外部 DOM 结构 - 手动封装一个带前缀的局部样式表：比如用 PostCSS +
postcss-prefix-selector把.container→.my-app .container，再只在目标容器上加className="my-app"
注意：container 和 row 这类布局类本身没有副作用，它们只是设置 max-width 和 flex，但如果你在局部容器里嵌套多个 .container，会导致意外的 padding 堆叠或宽度收缩——这是最容易被忽略的视觉 bug。
