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 并排显示而非上下堆叠”的根本原因。仅靠
标签无法影响 Flex 容器内部的布局逻辑，因为
在 Flex 上下文中被忽略。 ✅ 正确解法：为外层容器添加 flex-column 工具类，显式设置主轴方向为垂直（flex-direction: column）：
?
关键要点说明：
flex-column 是核心：它覆盖默认 row 方向，使子元素沿 Y 轴依次堆叠；
移除冗余
：Flex 布局中应使用间距工具类（如 mt-3、mb-3）控制元素间距离，语义清晰且响应式友好； 添加 w-100 max-w-sm 保证表单控件宽度适配（避免过宽或过窄）； 表单复选框应包裹在 .form-check 容器中，并为 设置 id、
标签无法影响 Flex 容器内部的布局逻辑，因为
在 Flex 上下文中被忽略。 ✅ 正确解法：为外层容器添加 flex-column 工具类，显式设置主轴方向为垂直（flex-direction: column）：
App Name
：Flex 布局中应使用间距工具类（如 mt-3、mb-3）控制元素间距离，语义清晰且响应式友好； 添加 w-100 max-w-sm 保证表单控件宽度适配（避免过宽或过窄）； 表单复选框应包裹在 .form-check 容器中，并为 设置 id、