align-items-center 失效的根本原因是父容器未设 d-flex 且缺乏垂直方向可用空间；必须搭配 d-flex 和 min-vh-100 才能可靠垂直居中。
为什么 align-items-center 总是没反应
不是类写错了，是父容器既没设 d-flex，也没提供可居中的高度空间。Flex 对齐类只在真正的 flex 容器里生效，且“垂直居中”必须有交叉轴（y 轴）上的可用空间——如果父元素高度是 auto 或未显式撑开，渲染高度就等于内容高度，“中”自然退化为贴顶。
常见失效场景包括：
-
.card或.navbar上直接加align-items-center，但没加d-flex（它们默认不是 flex 容器） - 中间嵌套了一层没加
d-flex的<div>，导致 flex 属性链断开 - 用在
.row上却忘了外层.container高度为auto，整行被内容压扁 - 在表格单元格里误用：
align-middle才是表格专用类，align-items-center对<td>无效
最简可靠起点：d-flex align-items-center min-vh-100。三者缺一不可：d-flex 启用布局上下文，align-items-center 作用于直接子项，min-vh-100 提供稳定高度锚点（比 h-100 更稳，不依赖父级高度设置）。
如何让 .row 内的多列真正等高
.row 默认已是 display: flex，但等高常失效，主因不是 Flex 没启用，而是子项缺乏拉伸依据或被干扰。
立即学习“前端免费学习笔记（深入）”；
关键条件：
-
.col-*必须是目标元素（如.card）的**直接父元素**，且该.col-*自身要加d-flex（不能只靠.row） -
.card需加h-100，否则高度继承链断裂；若中间有.card-body并设了min-height，会打断 stretch 行为 - 避免在
.col-*上手动写height或min-height，这会覆盖flex: 0 1 auto，阻止拉伸 - 图片必须加
img-fluid或max-width: 100%，否则某列被撑开而其他列不响应
示例结构：
<div class="row">
<div class="col-md-4 d-flex">
<div class="card h-100">...</div>
</div>
<div class="col-md-4 d-flex">
<div class="card h-100">...</div>
</div>
</div>
怎样在导航栏里安全地居中 logo
直接给 .navbar 加 justify-content-center 会破坏响应式结构：小屏下 .navbar-toggler 被拉到中间，点击区域错位；折叠态时 .navbar-collapse 变成 display: block，该属性彻底失效。
正确做法是用语义化三栏结构：
- 左侧容器带
class="navbar-nav me-auto"（哪怕为空） -
.navbar-brand单独作为中间节点，不加任何 margin 类 - 右侧容器带
class="navbar-nav ms-auto" - 三者必须是
.navbar的**直接子元素**，不能额外包<div>
小屏折叠后 .navbar-brand 偏左？用媒体查询单独控制：@media (max-width: 991.98px) { .navbar-brand { display: block; margin: 0 auto; text-align: center; } }。若它是图片，务必设 height 或 max-width: 100%，否则窄屏下可能溢出。
移动端图片置顶、桌面端左右并排怎么写
别用 order-* 在 .row/.col 里硬调顺序——嵌套越深，order 越容易失效，且需为每个列单独配值，维护成本高。
推荐方案：用容器级 Flex 方向控制：
- 外层容器加
d-flex flex-column-reverse：小屏下子元素自然倒序（图片在文字上方） - 加响应式类
flex-md-row：从md断点起恢复水平排列 - 配合
col-md-6控制宽度，无需额外.row嵌套
结构示例：
<div class="d-flex flex-column-reverse flex-md-row"> <div class="col-md-6"><img src="..." class="img-fluid"></div> <div class="col-md-6"><p>文案内容</p></div> </div>注意：这里不用
.row，因为 d-flex 已接管布局，再套 .row 反而干扰栅格计算。
复杂点在于嵌套层级和高度上下文的传递——Flex 工具类只对直接子元素生效，任何中间层缺失 d-flex 或高度约束，都会让对齐/等高行为静默失效。调试时优先看 computed styles 中的 display 和 height，而不是 class 列表。
