Bootstrap怎么设置特定断点下Col列的垂直对齐方式-Bootstrap教程-PHP中文网

align-items-* 必须加在 .row 上而非 .col 上，因其作用于 flex 容器的直接子项；.row 是 flex 容器，.col 是其子项，对齐需在 .row 设置，断点类需用 sm/md/lg/xl/xxl 前缀，且后写覆盖前写，同时父容器必须有明确高度（如 min-vh-100 或 h-100）才能生效。

bootstrap怎么设置特定断点下col列的垂直对齐方式

align-items-* 必须加在 .row 上，不是 .col 上

很多人把 align-items-center 加在 .col 上，发现列没变化——因为 align-items 是作用于 Flex 容器的子项，而真正包裹 .col 的 Flex 容器是 .row。加在 .col 上只会影响它内部的文字、图片等子元素，不是列与列之间的对齐。

正确写法是直接给 .row 加类：
<div class="row align-items-lg-center">...</div>

align-items-start：所有列顶部对齐（默认行为）
align-items-center：所有列内容在行高范围内垂直居中
align-items-end：所有列内容底部对齐
align-items-baseline：按文本基线对齐，适合图标+短句混排

断点类名必须用 sm/md/lg/xl/xxl 前缀，不能混用

Bootstrap 5 的响应式对齐类只支持五档断点：sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）、xxl（≥1400px）。没有 xs 或 auto 变体。

写法示例：
<div class="row align-items-md-center align-items-xl-end"> <br>注意：后写的类会覆盖前一个，<code>align-items-xl-end 生效，align-items-md-center 在 xl 及以上被忽略。

想“md 居中，xl 恢复默认”？得显式加 align-items-xl-stretch（stretch 是 Flex 默认值）
不能写 align-items-sm-center align-items-md-end 期望叠加生效——CSS 层叠规则下只保留最后一个
断点类只在对应宽度及以上生效，不是“仅在此尺寸”

没高度，align-items 就是摆设

align-items 不会撑开父容器，它只在已有垂直空间里重新分配位置。如果 .row 高度由内容撑开（比如几行文字），那所谓“居中”可能只有几像素偏移，肉眼根本看不出。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

必须确保 .row 或其某个祖先有明确高度：

全屏场景优先用 min-vh-100（兼容性好，响应式友好）
嵌套布局用 h-100，但要保证所有父级都加了 h-100（.container → .row → …）
避免写死 height: 500px，换设备就错位
min-height 不足以触发对齐行为，必须是 height 或 vh 类

典型有效结构：
<div class="container min-vh-100"><div class="row align-items-lg-center h-100"><div class="col">内容</div></div></div>

单列特殊对齐别动整行，用 align-self-*

如果只要某一列底部对齐，其他列保持默认位置，就不要改 .row 的 align-items——它会影响全部子列。

此时给目标 .col 加 align-self-end 即可：
<div class="row align-items-start"> <div class="col">默认顶部对齐</div> <div class="col align-self-end">仅此列底部对齐</div> </div>