错位源于结构语义与布局模型不匹配：标题-值对应每组独占一行并用align-items-center；图片列表需每行包裹.col-md-6；导航栏禁用硬写display:block；横排列表改用grid而非justify-content:space-between。
错位不是 CSS 写错了，而是结构语义和布局模型不匹配导致的——尤其在标题-值对、图片列表、导航折叠、表格等场景，强行用列平铺（col-md-3 × 4）或忽略 Flex 默认行为，就会立刻暴露。
标题和值在小屏下错行：别拆成四列，改用每组一行
常见错误是把两组 <label></label> + <value></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，Bootstrap 不保证它们按“行”对齐高度。浏览器按文档流渲染，短图的列不会撑起整行，导致下一行往上塌陷、留白错位。
- 结构上，把每两个
.col-md-6包进一个.row（或自定义.row-flex），而不是全部平铺在同一个父容器里 - CSS 层面，确保该
.row有display: flex（Bootstrap 5 默认就是）且未被覆盖；必要时加align-items: stretch - 不要给
.col-md-6设固定height或min-height，这会干扰 Flex 等高逻辑 - 如果图片加载异步，先占位（如
aspect-ratio或 padding-top hack），防止回流抖动加剧错位
导航栏在窄屏点不开/菜单截断：检查是否硬写了 display: block
最常踩的坑是媒体查询里对 #navbarSupportedContent 直接设 display: block。这会锁死显示状态，让 Bootstrap 的 JS 切换 .show 类完全失效——按钮点击没反应，控制台也无报错。
立即学习“前端免费学习笔记（深入）”；
- 删掉所有针对
#navbarSupportedContent的display声明，无论是 CSS 文件里还是style属性中 - 展开后若菜单项横向挤在一起，说明
.navbar-collapse在.show状态下仍用flex-row，加 CSS：.navbar-collapse.show { flex-direction: column; } - 下拉菜单（
.dropdown-menu）被裁剪？检查父级是否设了overflow: hidden或固定height，去掉即可 - 不用
position: absolute强行定位折叠区域，它本应自然流式展开
列表项横排不均、最后一行空右边：放弃 justify-content: space-between
想让 .list-group-item 横排等宽又自动换行，很多人加 .d-flex 后配 justify-content: space-between，结果最后一行不满就全挤左边，右边大片空白。
- 改用
display: grid，给.list-group加：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))); gap: 0.5rem; - 必须重置
.list-group-item的默认margin和width：margin: 0; width: auto; - 如果项内有
.btn或.form-control，它们自带width: 100%，会撑破格子，需单独设width: auto - IE11 不支持 Grid？那就老实用 JavaScript 动态计算每行项目数并插入
.row分隔，别硬扛
错位问题几乎都源于「用列思维组织行数据」，而 Bootstrap 的栅格本质是 Flex 容器。真正要调的不是 margin 或 position，是把 HTML 结构拉回到语义正确的层级——标题和值是一组，两张图是一行，每个导航项是一个独立单元。CSS 只是配合这个结构做微调，不是用来打补丁的。
