在 Bootstrap 5 中，若使用 d-flex 容器但子元素仍水平排列，需显式添加 flex-column 类以启用垂直主轴方向；仅靠 或居中类无法改变 Flex 布局的默认流向。
在 bootstrap 5 中，若使用 `d-flex` 容器但子元素仍水平排列，需显式添加 `flex-column` 类以启用垂直主轴方向；仅靠 `
` 或居中类无法改变 flex 布局的默认流向。
默认情况下，Bootstrap 的 d-flex 类启用的是 flex-direction: row（水平排列）。即使你已使用 align-items-center 和 justify-content-center 实现居中，所有直接子元素仍会沿行内方向依次排布——这就是为何你的表单控件全部“并排”显示，而非预期的上下堆叠。
✅ 正确解法：为外层 Flex 容器添加 flex-column 工具类，强制主轴方向为垂直（即 flex-direction: column）：
<div class="landing d-flex flex-column align-items-center justify-content-center h-100" id="start">
<div id="start-app">
<p id="app-name" class="header h1">App Name</p>
</div>
<div class="mt-3 w-100 max-w-sm">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mt-3 w-100 max-w-sm">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="mt-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember"><label class="form-check-label" for="remember">Remember me</label>
</div>
</div>
<div class="mt-4">
<p><i class="fa-solid fa-circle-play" id="start-icon"></i></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
</div>
? 关键改进说明：
- flex-column 是核心：它覆盖默认 row 方向，使子元素自上而下堆叠；
- 移除冗余
：Flex 布局中应使用间距工具类（如 mt-3、mt-4）控制垂直间距，语义清晰且响应式友好； - 添加 w-100 max-w-sm 确保表单控件宽度适配（避免过宽或过窄），提升移动端体验；
- 修正复选框结构：使用标准 .form-check 包裹，确保样式与可访问性合规；
- height: 100vh 可保留，但需注意内容总高度不可超过视口（本例中 h-100 + flex-column 已足够撑满，无需额外 CSS）。
⚠️ 注意事项：
- 不要嵌套多个 d-flex 而未指定方向——每个 Flex 容器都需明确 flex-row / flex-column；
- 避免混合使用
与 Flex 间距工具类，易导致不可预测的空白； - 若需响应式方向切换（如移动端列、桌面端行），可用 flex-md-row 等断点类。
掌握 flex-column 是 Bootstrap 5 垂直布局的基石——它简洁、语义明确，且与所有其他 Flex 工具类（如 align-self-*、gap-*）无缝协同。
