应优先使用 Bootstrap 的 Flex 工具类（如 .flex-column、.gap-3、.order-1），确保父容器为 flex，避免手写 display: flex 与 Bootstrap 类冲突，并注意 gap 仅对 flex/grid 容器生效。
Flexbox 和 Bootstrap 的 class 冲突怎么避免
Bootstrap 5 默认基于 Flexbox 构建，.row、.col、.d-flex 等类底层都调用 display: flex。直接在同一个元素上混用自定义 Flexbox 样式（比如 flex-direction: column）和 Bootstrap 的 .flex-row 可能导致样式覆盖或行为异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先使用 Bootstrap 提供的响应式 Flex 工具类，如
.flex-column、.justify-content-center、.align-items-start，而非手写display: flex块 - 若需精细控制，把自定义 Flex 样式写在独立 class 中，并确保其 CSS 选择器权重 ≥ Bootstrap（例如加
!important是下策，更推荐用更具体的父选择器包裹） - 检查浏览器开发者工具中
display、flex-direction等属性是否被意外重置——常见于.col在小屏幕下默认为flex-direction: column，而你又写了flex-row
如何让 Bootstrap 的 .col 在 Flex 容器中正常换行
当把 .col 放进一个外部 display: flex 容器（非 .row）时，.col 默认的 flex: 0 0 auto 会阻止它响应父容器宽度自动换行，导致横向溢出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给外部 flex 容器添加
flex-wrap: wrap（Bootstrap 有.flex-wrap类） - 给每个
.col显式设置flex: 1 1 0或使用.col-12 .col-md-6等栅格类来控制基础尺寸 - 避免直接对
.col设置width，它会破坏 Flex 的弹性计算；改用max-width或 Bootstrap 的.w-50等工具类
Bootstrap 5 的 gap 属性与 Flexbox 的 margin 冲突
Bootstrap 5 引入了 .gap-3 这类工具类，底层用的是 gap（仅对 Flex/Grid 容器生效）。但如果你在非 Flex 容器里用了 .gap-3，它不会起作用；更糟的是，有人会误用 margin 模拟间隙，结果和 .gap 共存时出现双倍间距。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只在
display: flex或display: grid的父容器上用.gap-*类；.row默认是 flex，所以.row.gap-3有效，但.container.gap-3无效 - 不要同时给子项加
.me-3和父容器加.gap-3，否则第一项右边 + 第二项左边 = 两倍空隙 - 需要兼容旧版浏览器时，
gap不支持 IE，此时应回退到margin+:not(:last-child)选择器控制
响应式 Flex 排序（order）和 Bootstrap 的 .order-* 类怎么配合
Bootstrap 的 .order-1、.order-md-3 就是封装好的 order 属性，但它只对 flex 子项生效。如果父容器没设 display: flex，这些类完全无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有
display: flex（用.d-flex或.d-md-flex），否则.order-类不触发 -
.order-0到.order-12是整数，但实际支持负值和大数（如order: -99），Bootstrap 没提供，需手写style="order: -99"或自定义 class - 移动端排序常需反转顺序，别只改
.order-，还要同步调整flex-direction（比如从row改成row-reverse）才能让视觉流自然
Flexbox 和 Bootstrap 结合的关键不在“能不能用”，而在“谁控制主轴、谁负责换行、谁管间隙”。漏掉任何一个，布局就容易在某个断点突然错位。
