Bootstrap垂直对齐方式 Bootstrap如何使用align-items

align-items在Bootstrap中常无效是因为父容器无显式高度，导致无垂直空间可对齐；需确保.row或其祖先有vh-100/h-100等明确高度，且align-items应加在.row上控制列整体对齐。align-items 在 Bootstrap 里为什么经常没反应？因为 align-items 是 flexbox 的交叉轴对齐工具，它不“推”内容，只在**已有垂直空间内重新分配位置**。如果父容器（比如 .row）高度由内容撑开，那根本没空间可“对齐”，所有列自然堆在顶部——这不是 bug，是 flex 行为本身。常见错误现象：加了 align-items-end，但文字/图片还是贴顶；检查 computed height 会发现 .row 高度 ≈ 内容总高必须确保 .row 及其至少一个祖先有明确高度（不能靠内容撑）推荐优先用 vh-100（视口高）或 h-100（父容器 100% 高），避免写死 height: 400px 这类固定值注意：min-height 不够，align-items 不会在“最小高度之外”的空白处生效想让整行的列底部对齐，该加在哪？直接加在 .row 上，用 align-items-end。这是最常用也最省事的方式，适用于所有子列整体下移场景（比如三栏卡片底部统一平齐）。使用场景：产品列表页每行三个卡片，希望“查看详情”按钮都对齐到同一水平线正确写法：<div class="row align-items-end vh-100"> <div class="col">内容1</div> <div class="col">内容2</div> <div class="col">内容3</div></div>别加在 .col 上——那是控制列自身内部子元素的对齐，不是列之间的对齐如果只有一列需要底部对齐，其他列默认位置，就别用 align-items-* ，改用 align-self-end 加在那个 .col 上单个列里内容要贴底，不是整行对齐这时候得让列自己变成 Flex 容器，再对齐它的子元素。加 d-flex + align-items-end 到目标 .col 即可。使用场景：右侧侧边栏广告位，图片+标题+按钮，希望按钮永远停在列底部，不管上面内容多少示例：<div class="col d-flex align-items-end"> <div><img src="ad.jpg"></div> <div class="mt-auto"><button>立即购买</button></div></div>mt-auto 是个更轻量的替代方案：给按钮加这个类，它会自动占满上方剩余空间，把按钮“挤”到底部，无需改列的 display注意：d-flex 会让列内子项变成水平排列（主轴默认 row），如果原本是块级堆叠，记得加 flex-columnalign-items-center 居中失效？先看有没有“空间”align-items-center 要居中，前提是容器在交叉轴上有富余空间。很多页面只写了 align-items-center，却忘了给 .row 或外层 .container 设高度，结果只是“在 24px 高里居中”——看起来和贴顶没区别。 千面数字人 千面 Avatar 系列：音频转换让静图随声动起来，动作模仿让动漫复刻真人动作，操作简单，满足多元创意需求。