最稳妥解法是用 css 层叠上下文隔离 layui 区域，即为容器添加唯一 class（如 layui-scope），再通过前缀规则（.layui-scope .layui-btn）和局部重置（.layui-scope button { all: unset }）限定作用域，避免全局污染与升级冲突。
直接改 layui.css 的选择器权重或强行加 !important 是最常见但最危险的做法——它会让后续维护变成噩梦，而且容易在升级 LayUI 时被覆盖。
确认 CSS 加载顺序和作用域冲突点
LayUI 样式被 Bootstrap 覆盖，根本原因是浏览器按 HTML 中 <link> 标签顺序解析 CSS，后加载的规则优先级更高（同权重下）。如果你先引了 Bootstrap，再引 LayUI，但 Bootstrap 的某些通用选择器（比如 .btn、.form-control）范围太宽，就会“漏进” LayUI 的 DOM 结构里。
- 用浏览器开发者工具（F12）选中一个被污染的元素（如
layui-btn），看右侧 Styles 面板里哪些样式被 strike-through（划掉），点开对应 CSS 文件链接，确认是哪条规则在起效 - 特别注意 Bootstrap 的重置类（如
*, ::before, ::after { box-sizing: border-box; }）和基础表单重置，它们会直接影响layui-form-item内部 input 的盒模型 - LayUI 的组件多数依赖属性选择器（如
[lay-submit]）或带前缀的 class（如layui-table），而 Bootstrap 偏爱语义化 class（如table、btn），冲突常发生在没加前缀的通用标签上（button、input、select）
用 CSS 层叠上下文隔离 LayUI 区域
不改全局样式，而是把 LayUI 组件“包”进一个独立样式作用域，是最稳妥的解法。LayUI 本身不提供 Shadow DOM 或 scoped style，得靠手动包裹 + 局部重置。
- 给 LayUI 使用的容器加唯一 class，比如
<div id="layui-app" class="layui-scope">...</div> - 在自定义 CSS 文件中写前缀规则：
.layui-scope .layui-btn { ... }，并针对性重置可能被污染的标签：.layui-scope button, .layui-scope input, .layui-scope select { all: unset; }（注意：IE 不支持all: unset，若需兼容 IE11，得逐项重置margin、padding、border等） - 避免使用
!important，除非是修复极个别无法通过层级解决的旧版 Bootstrap 2.x 规则
删减或定制 Bootstrap 的 CSS 输出
如果你只用 Bootstrap 的栅格（container、row、col）和部分工具类，完全没必要加载整套 bootstrap.min.css。冗余样式越多，越容易误伤 LayUI。
- 用 Bootstrap 官方 Sass 源码，注释掉不需要的模块（如
_buttons.scss、_forms.scss、_tables.scss），只保留_grid.scss和_utilities.scss中的 spacing、display、flex 相关工具类 - 如果项目没用 Sass，可改用 Bootstrap 的 CDN 定制版（如 jsDelivr 提供的 partial build 链接），或用 PurgeCSS 扫描 HTML 后剔除未使用的 Bootstrap class
- 切记：删完之后要验证响应式断点（
col-md-6等）是否仍生效，Bootstrap 的栅格依赖@media查询和flex基础声明，缺一不可
真正难处理的不是按钮或输入框样式打架，而是 layer.open() 弹出的浮层被 Bootstrap 的 z-index 叠加上下文截断，或者 laydate 日历面板被父容器 overflow: hidden 剪掉——这类问题必须结合 DOM 结构和层叠上下文定位，光调样式权重没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
