不能直接用bootstrap做微信小程序。小程序运行在双线程环境，不支持document、window、jquery及外部css加载，其wxss不支持@media查询、flex负边距、!important等bootstrap依赖特性，js组件因缺乏dom操作能力完全失效。
不能直接用 Bootstrap 做微信小程序。 微信小程序运行在自研的双线程渲染环境里，不支持 document、window、jQuery，也不加载外部 CSS 文件（所有样式必须内联或通过 .wxss 编译），而 Bootstrap 的 CSS 依赖全局重置、大量 class 覆盖、媒体查询嵌套，JS 插件强依赖 DOM 操作 —— 这些在小程序里全被拦截或无效。
为什么 bootstrap.min.css 在小程序里基本失效
小程序的样式系统（.wxss）不支持以下 Bootstrap 核心机制：
-
@media查询在部分基础库版本中解析异常，col-sm-6这类断点类在真机上可能完全不生效 - Bootstrap 的
container依赖max-width+margin: 0 auto，但小程序对max-width的计算逻辑与浏览器不同，常导致横向溢出 - 栅格类如
row/col依赖display: flex和负外边距（margin-left: -15px），而旧版基础库（2.20.0之前）对flex子项的padding行为有兼容偏差 - 所有带
!important的 Bootstrap 规则，在.wxss中会被静默忽略
强行“移植” Bootstrap 组件会遇到什么问题
有人尝试把 button、card、modal 的 HTML + CSS 拆出来改写成 WXML/WXSS，结果普遍卡在三处：
-
data-bs-toggle="modal"这类属性在 WXML 中无意义，小程序没有事件绑定反射机制，必须手动写bindtap+setData - Bootstrap 的
tooltip依赖position: absolute+ 动态计算offsetTop，但小程序SelectorQuery获取节点位置异步且不准，悬停提示极易错位 - 表单组件如
form-control依赖原生<input>的伪类（:focus），而小程序<input>的 focus 状态无法用 CSS 捕获，只能靠 JS 切 class，失去响应式反馈节奏
如果项目已用 Bootstrap，想复用设计稿怎么办
不是“能不能搬代码”，而是“怎么转译语义”：
- 把
col-md-4对应的 33.33% 宽度逻辑，转成style="flex: 0 0 33.33%"或使用小程序flex-direction: row+flex-wrap布局 - 用小程序原生
van-button（Vant Weapp）、uni-button（uni-app）等组件库替代btn btn-primary，它们已适配小程序生命周期和样式隔离 - 颜色/圆角/间距等设计变量，从 Bootstrap 的
$primary、$border-radius抽出来，写进小程序project.config.json的主题配置或app.scss全局变量 - 放弃“一套代码多端”，接受「UI 规范复用」而非「代码复用」——同一套 Figma 设计系统，分别输出 Web（Bootstrap）和小程序（自定义组件 + WXSS）两套实现
真正容易被忽略的是：小程序里没有“重排”（reflow）概念，offsetHeight、getBoundingClientRect() 返回值在某些机型上恒为 0；而 Bootstrap 大量 JS 插件（Dropdown、Offcanvas）正是靠这些值做定位。这不是加个 polyfill 能解决的，是底层渲染模型差异。别试图 patch，该重写就重写。
