bootstrap 3自定义css无法直接复用于bootstrap 5，因其彻底移除float栅格、废弃-xs/-sm前缀、重写表单语义、改用css变量间距系统，硬编码px值或依赖旧变量将导致布局偏移、响应式失效。
Bootstrap 3 的自定义 CSS 无法直接复用于 Bootstrap 5——不是“微调就能用”，而是多数规则会失效或产生意外布局偏移，尤其当你的自定义依赖 .col-xs-*、.form-horizontal、.btn-default 或 float 布局时。
为什么直接保留旧 CSS 文件会出问题
Bootstrap 5 彻底移除 float 栅格、废弃所有 -xs/-sm 前缀类（改用断点链）、重写表单结构语义、并把间距系统全换成 CSS 变量（--bs-gutter-x、--bs-spacer）。你写的 .my-custom-col { width: 33.333%; float: left; } 在 v5 中：
- float 不再参与栅格流，可能脱离容器
- width 值被 .col-4 的 flex: 0 0 auto 覆盖
- 没有 row 包裹时，gutter 间隙不会自动计算
- 检查你是否在自定义中硬编码了
px值（如margin-left: 15px）——v5 默认用var(--bs-gutter-x)，且值为1.5rem（24px） - 确认是否覆盖了
$grid-breakpoints变量——v5 的 Sass map 结构已变，旧的$screen-sm等变量名已不存在 - 若你用
!important强行维持旧样式，大概率会和 v5 的.d-flex、.gap-3冲突，导致响应式断点完全失效
迁移自定义 CSS 的实际操作路径
别试图“修旧 CSS”，应该把它当作一份需求说明书，重新用 v5 原语实现。核心动作是三步走：
- 提取逻辑：把旧文件里每个 class 的作用列出来（例如：
.sidebar-nav= 左侧固定宽导航栏 + 垂直居中图标） - 查新文档：对应到 v5 官方组件或实用类，比如固定宽用
.col-md-3+.position-sticky，垂直居中用.d-flex .align-items-center - 重写而非替换：删掉整段旧 CSS，用
.sidebar-nav+.sidebar-nav-item这类语义化 class 名，配合 v5 的.p-3、.gap-2、.text-truncate组合实现
示例：旧 v3 中一段导航条自定义
.nav-sidebar {
margin: 0 -15px;
}
.nav-sidebar > li > a {
padding: 10px 15px;
border-left: 3px solid transparent;
}
.nav-sidebar > li.active > a {
border-left-color: #007bff;
}
在 v5 中应重写为：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<div class="nav flex-column"> <a href="#" class="nav-link ps-3 border-start border-3 border-transparent">首页</a> <a href="#" class="nav-link ps-3 border-start border-3 border-primary">设置</a> </div>
——不再需要额外 CSS，全部靠内置类组合完成。
如何安全处理 Sass 变量自定义
v5 的变量体系是扁平 map，不是 v3 的嵌套变量。如果你之前改过 $brand-primary 或 $grid-columns，必须按新结构重写：
-
$primary替代$brand-primary，且必须在引入 Bootstrap Sass 前定义 -
$grid-columns仍存在，但它的默认值现在是12（没变），不过栅格生成逻辑已绑定$grid-breakpoints和$container-max-widths，三者需同步更新 - 所有
$spacer相关变量（如$spacers）必须用 map 形式重写，例如：$spacers: (0: 0, 1: .25rem, 2: .5rem, ...)；旧的$padding-base-vertical类变量已彻底消失 - 如果用了
@import "bootstrap/scss/functions"，确保它在你自定义变量之后、@import "bootstrap/scss/variables"之前加载，否则你的值不会生效
最常被忽略的一点：v5 的 border-radius 默认值从 4px 升到 .375rem（6px），且所有组件（.btn、.card、.form-control）都继承这个值。如果你的旧 CSS 里写了 border-radius: 2px 来“压平”某些圆角，现在得显式覆盖 --bs-border-radius CSS 变量，而不是只改 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
