<p>Bootstrap 4 不兼容 Bootstrap 3 自定义 CSS，因弃用 float 布局、.col-xs-* 类及旧断点命名，改用 Flexbox 栅格、无前缀断点、重构表单结构、移除 .open 类并依赖 Popper.js，需全面重写样式与变量。</p>
直接复用 Bootstrap 3 的自定义 CSS 到 v4 会出布局错乱、断点失效、表单错位等问题——v4 的 Flexbox 栅格、新断点命名、重写的表单结构和移除的 float 布局，让大部分旧规则失去作用。
为什么 .col-xs-* 类在 Bootstrap 4 中完全无效
Bootstrap 4 彻底废弃了 .col-xs-*，所有断点从 xs 起始改为无前缀（即 .col-*），且默认生效于所有屏幕尺寸。如果你的旧 CSS 里写了 .my-col { width: 50%; float: left; } 并依赖 .col-xs-6 触发响应行为，v4 中它不会随视口缩放，也不会参与 flex 容器对齐。
-
.col-xs-6→ 必须改为.col-6（最小屏起生效）或.col-sm-6（≥576px 才生效） - 手动写
float: left会与.row的display: flex冲突，导致元素脱离文档流 - 旧栅格中靠
margin-left: -15px拉回父容器的做法，在 v4 的gutter系统下会被gap或padding覆盖，造成左右偏移
表单类名和结构必须重写
v4 把 .form-horizontal、.form-group 语义重构为基于 flex 的 .row + .col 组合，且 .control-label 和 .checkbox 等类被移除。硬套旧样式会导致 label 不对齐、复选框错位、输入框高度不一致。
-
.form-horizontal .form-group→ 改用.row .mb-3+.col-form-label+.col -
.input-lg/.input-sm→ 替换为.form-control-lg/.form-control-sm - 自定义的
.btn-default已不存在，v4 只保留.btn-primary/.btn-secondary等语义类，需重定义颜色变量或用.btn-outline-*替代
间距和颜色变量不再兼容
v4 开始大量使用 Sass map 变量（如 $spacers、$grid-breakpoints），旧版直接写死的 margin: 0 15px 或 color: #333 会和 v4 的 rem 基准、em 计算冲突；而覆盖 $screen-sm 这类已被删除的变量，编译时直接报错。
立即学习“前端免费学习笔记（深入）”；
- 避免硬编码像素值：把
padding: 10px 20px改成py-2 px-4或.p-3等实用类 - 检查是否引用了已废弃的变量名：
$screen-xs-min、$grid-float-breakpoint全部移除，改用$grid-breakpoints: (sm: 576px, md: 768px, ...) - 如果用了自定义主题色，确认
$theme-colorsmap 结构是否匹配 v4 要求（键名必须是字符串，值为合法 color）
JavaScript 插件初始化方式变了
虽然这不是纯 CSS 迁移问题，但很多自定义样式依赖 JS 插件状态（比如 .dropdown-menu 显示时加 .open 类）。v4 移除了 .open，改用 .show，且 Popper.js 成为 tooltip/popover 必需依赖。
- 查找所有
.open相关 CSS 规则，全部替换为.show（包括伪类如.dropdown.open .dropdown-menu→.dropdown.show .dropdown-menu） - 确保 HTML 中已引入
popper.js，否则data-toggle="tooltip"类将无法触发，导致相关样式不生效 - 旧版
$.fn.modal的backdrop: false在 v4 中需显式传参，否则默认 backdrop 为true，可能遮挡你自定义的 modal 样式
迁移不是“修 CSS”，而是用 v4 的原语重新表达设计意图。最稳妥的方式是删掉旧自定义文件，对照官方文档，用 .d-flex、.gap-2、.text-truncate 这类实用类组合实现相同效果——硬 patch 旧规则，往往在某个断点或插件交互时突然崩塌。
