如何限制Bootstrap仅作用于指定组件，不影响网站原有样式？

当然可行，不用手动覆盖全局样式，有几个更高效的方法：

1. 给Bootstrap样式加自定义父类前缀（最推荐，兼容性拉满） #

这是最稳妥的方案，通过给所有Bootstrap选择器加上专属父类，让样式只作用于该父类内部的元素：

• 如果用Sass版本的Bootstrap，直接在项目Sass文件里嵌套引入Bootstrap：

// 自定义父类，命名可按需调整，比如.bootstrap-scoped
.bootstrap-scoped {
  @import "bootstrap/scss/bootstrap";
}

编译后，所有Bootstrap样式选择器都会自动带上.bootstrap-scoped前缀，比如原有的a { text-decoration: underline; }会变成.bootstrap-scoped a { text-decoration: underline; }。

• 如果用预编译的CSS文件，可以借助工具（比如PostCSS的postcss-prefix-selector插件）批量给所有选择器加上前缀，无需手动修改每一行代码。

使用时，把Bootstrap组件放在带这个类的容器里即可：

<div class="bootstrap-scoped">
  <!-- 容器内的元素会应用Bootstrap样式 -->
  <a href="#" class="btn btn-link">Bootstrap链接按钮</a>
  <div class="card">卡片内容...</div>
</div>

<!-- 容器外的元素不受Bootstrap影响 -->
<a href="#">普通链接</a>

2. 用Shadow DOM彻底隔离样式 #

如果需要完全的样式隔绝，Shadow DOM是合适的选择，它能让组件内部样式和外部完全独立：

// 获取组件容器
const scopedContainer = document.getElementById('bootstrap-component');
// 创建Shadow DOM根节点
const shadowRoot = scopedContainer.attachShadow({ mode: 'open' });

// 引入Bootstrap样式到Shadow DOM内部
const bootstrapStyle = document.createElement('link');
bootstrapStyle.rel = 'stylesheet';
bootstrapStyle.href = '你的Bootstrap CSS文件路径';
shadowRoot.appendChild(bootstrapStyle);

// 插入Bootstrap组件内容
shadowRoot.innerHTML = `
  <button class="btn btn-primary">隔离的Bootstrap按钮</button>
`;

这种方法无需修改Bootstrap原始样式，缺点是需要少量JS代码，且旧浏览器（如IE）不支持Shadow DOM。

3. 避坑提示：不要用scoped style标签直接引入Bootstrap #

虽然部分框架支持<style scoped>，但直接把Bootstrap样式放进scoped标签会导致body、html这类全局选择器失效，且部分样式的作用范围会不符合预期，不推荐这种方式。

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