错位源于结构语义与布局模型不匹配：标题-值对需每组独立.row.align-items-center；图片列表须每两个.col-md-6包一.row；form-inline需检查视口及margin；所有场景须严守.row→.col-*嵌套规则。
错位不是 CSS 写错了，是结构语义和布局模型不匹配导致的——尤其在标题-值对、图片列表、导航折叠、表格等场景，强行用列平铺（col-md-3×4）或忽略 Flex 默认行为，就会立刻暴露。
标题和值在小屏下错行：必须每组单独包 .row.align-items-center
常见错误是把两组 <label>+<value> 塞进同一个 .row，用四个 .col-md-3 并排。一旦某条 value 换行变高，上面的 label 就卡在原位，视觉上“挂”在别人头上。
- 每个逻辑对（甚至两组对）单独包一个
.row.align-items-center，内部用.col-md-3分配宽度 - 这样每行内所有列由 Flex 自动等高拉伸，无需 JS 计算高度
- 小屏下自动堆叠为单列，
label和对应value始终紧邻，语义和视觉都对齐 - 避免在
.row上加flex-wrap: wrap或手动设height，会破坏align-items的拉伸效果
图片列表底部参差不齐：每两个 .col-md-6 必须包裹在独立 .row 里
直接写一长串 .col-md-6，Bootstrap 不保证它们按“行”对齐高度。浏览器按文档流渲染，短图的列不会撑起整行，导致下一行往上塌陷、留白错位。
- 把每两个
.col-md-6包进一个.row（或自定义.row-flex），而不是全部平铺在同一个父容器里 - 确保该
.row有display: flex（Bootstrap 5 默认就是）且未被覆盖；必要时加align-items: stretch - 不要给
.col-md-6设固定height或min-height，这会干扰 Flex 等高逻辑 - 如果图片加载异步，先占位（如
aspect-ratio或padding-tophack），防止回流抖动加剧错位
表单控件在 form-inline 中横排失效或不对齐
form-inline 在 Bootstrap 4 中仅在 ≥576px 启用 display: flex，低于该宽度自动回退为 display: block；错位主因是父容器未设 flex 或子项 margin 干扰。
- 检查视口宽度是否低于 576px —— DevTools 切换设备模拟器可快速验证
- 统一加
align-items-center到form-inline容器（Bootstrap 4 支持该工具类） - 手动重置子项
margin：.form-inline .form-control, .form-inline .btn { margin-top: 0; margin-bottom: 0; } - 避免在
form-inline内使用.input-group——它的display: table会破坏 flex 流 - 若需小屏也保持横排，改用自定义类：
.form-horizontal-sm { display: flex !important; flex-wrap: wrap; }，并配@media (max-width: 575.98px)覆盖
卡片、导航、表格等组件错位：优先检查嵌套合法性
Bootstrap 栅格系统基于 Flexbox，核心规则是：.row 必须是 .container 的直接子元素，.col-* 必须是 .row 的直接子元素。任何中间插入的标签（比如 <form>、<div class="wrapper">）都会打断这个链路。
- 检查 HTML 结构中是否存在
<form>包裹.col-*的情况——这是最常被忽略的根源 -
.card-group上禁用mx-*类，应改用gap-*或直接作用于.card -
.navbar-collapse展开后菜单项挤在一起？加.navbar-collapse.show { flex-direction: column; } -
bootstrap-table表头错位？优先注释掉this.resetHeader()和padding += this.$header.outerHeight()这两行（源码级修复）
真正难调的永远不是样式本身，而是结构里那些看不见的父子关系断裂点——比如 .row 下多了一层 <section>，或者 .col-* 外围被 <template> 包裹（Vue 场景）。这类问题不会报错，但会让所有响应式类集体“失能”。
