Bootstrap 5中.col宽度不生效的直接原因是.row强制flex布局且.col默认flex-basis: 0，覆盖float/width；需用col-auto、col-12或flex-none修复，并确保声明col-基类以支持响应式退化。
直接原因：Bootstrap 5 默认移除了对 IE 的兼容支持，同时将 .row 的 display 值从 block（v4）改为 flex，且所有 .col 类默认启用 flex: 1 1 0 —— 这会强制子元素拉伸并忽略内部 width 或 float 设置。
升级后 .col 元素宽度不生效了
常见现象是写好 col-md-6 却占满整行，或多个 col 挤成一列。这不是类没加载，而是 Flexbox 的默认行为覆盖了旧有逻辑。
-
col类现在自带flex-basis: 0，除非显式设置flex: none或用col-auto/col-12等明确宽度类 - 如果原项目依赖
float: left+width手动布局，这些规则会被display: flex的.row完全忽略 - 检查是否误删了
.container或.container-fluid—— 缺失容器会导致.row的负 margin 失效，列向右溢出
断点类在小屏下完全不响应
比如 col-sm-6 在手机上仍显示两栏，而预期是堆叠为单列。这通常是因为遗漏了移动优先的基类。
- Bootstrap 5 要求「最小断点必须显式声明」：
col-12 col-sm-6才表示「手机竖屏全宽，≥576px 才分两栏」 - 只写
col-sm-6等价于col-sm-6 col-md-6 col-lg-6 ...，即从 sm 开始一直生效，无退化行为 - 若项目曾用 v4 的
col-xs-*，需全部替换为col-*（v5 已删除xs前缀，col-就是 xs 断点）
嵌套 .row 导致列偏移或错位
典型错误是把多个 .row 套在同一个父 .col 里，结果第二行开始整体右移、卡片错位甚至横向滚动条出现。
-
.row自带margin-left: -15px; margin-right: -15px，用于抵消.col的padding；但嵌套时，内层.row的负 margin 会超出外层.col边界 - 正确做法：每个
.row必须直属于.container或另一个.row的同级.col，不能「.col → .row → .row」嵌套 - 如需多行内容，应在同一
.row内放多个.col，或改用row-cols-*类控制每行列数
自定义 CSS 覆盖了 Flex 排列逻辑
尤其容易被忽略的是：你写的 width: 300px 或 max-width: 100% 在 .col 上可能被 flex-basis 和 min-width 抑制。
- Flex 容器中，
width不再决定主轴尺寸，起作用的是flex-basis（由col-*n控制）和flex-grow - 若要固定宽度，优先用
col-auto+ 内部width，或加flex-shrink: 0防止压缩 - 检查是否有全局重置样式（如
* { box-sizing: border-box }）未同步更新，导致 padding 计算偏差放大
最常被跳过的验证点：是否还在用 jQuery 初始化 Bootstrap 组件？v5 的 JS 插件（如 Modal、Dropdown）已完全脱离 jQuery，bootstrap.Modal 必须通过 ES module 或 bootstrap.bundle.min.js 加载，否则 JS 行为失效也会让依赖交互的网格区域（如折叠侧边栏）表现异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
