在 Bootstrap 5 中，若使用 d-flex 容器但子元素仍水平排列，需显式添加 flex-column 类以启用垂直主轴方向；仅靠 <br> 或居中类无法改变 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>
</div>? 关键改进说明：
- flex-column 是核心：它覆盖默认 row 方向，使子元素自上而下堆叠；
- 移除冗余 <br><br>：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；
- 避免混合使用 <br> 与 Flex 间距工具类，易导致不可预测的空白；
- 若需响应式方向切换（如移动端列、桌面端行），可用 flex-md-row 等断点类。
掌握 flex-column 是 Bootstrap 5 垂直布局的基石——它简洁、语义明确，且与所有其他 Flex 工具类（如 align-self-*、gap-*）无缝协同。
