Bootstrap 5 默认 d-flex 容器使用水平主轴（row），需添加 flex-column 类才能使子元素垂直排列；配合 align-items-center 和 justify-content-center 可实现页面中央的纵向堆叠布局。
bootstrap 5 默认 `d-flex` 容器使用水平主轴（row），需添加 `flex-column` 类才能使子元素垂直排列；配合 `align-items-center` 和 `justify-content-center` 可实现页面中央的纵向堆叠布局。
在 Bootstrap 5 中，d-flex 类默认启用的是水平弹性布局（flex-direction: row），这意味着所有直接子元素会从左到右依次排列——这正是你遇到“div 并排显示而非上下堆叠”的根本原因。仅靠 <br> 标签无法影响 Flex 容器内部的布局逻辑，因为 <br> 在 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-3">
<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 fs-1 text-primary" id="start-icon"></i></p>
</div>
</div>? 关键要点说明：
- flex-column 是核心：它覆盖默认 row 方向，使子元素沿 Y 轴依次堆叠；
- 移除冗余 <br>：Flex 布局中应使用间距工具类（如 mt-3、mb-3）控制元素间距离，语义清晰且响应式友好；
- 添加 w-100 max-w-sm 保证表单控件宽度适配（避免过宽或过窄）；
- 表单复选框应包裹在 .form-check 容器中，并为 <input> 设置 id、<label> 设置 for 属性，提升可访问性；
- 注意：若内容总高度超过视口（如误加 height: 100vh 且内容溢出），可能导致底部元素被截断——Bootstrap 的 h-100 需确保父容器有明确高度上下文，通常推荐移除自定义 body { height: 100vh }，改用 min-vh-100 或依赖 Bootstrap 内置高度类。
? 小结：Flex 布局的方向控制权在容器而非子元素。遇到“不按预期排列”，第一反应应检查容器的 flex-direction（对应 Bootstrap 的 flex-row / flex-column / flex-row-reverse 等工具类），而非强行插入换行符或浮动 hack。
