在 Bootstrap 5 中，若使用 d-flex 容器希望子元素垂直排列（而非默认的水平排列），必须显式添加 flex-column 工具类；仅靠 align-items-center 和 justify-content-center 无法改变主轴方向。
在 bootstrap 5 中，若使用 `d-flex` 容器希望子元素垂直排列（而非默认的水平排列），必须显式添加 `flex-column` 工具类；仅靠 `align-items-center` 和 `justify-content-center` 无法改变主轴方向。
默认情况下，Bootstrap 的 d-flex 类启用的是 水平主轴（row），所有直接子元素会沿行方向依次排列——这正是你遇到“div 并排显示”问题的根本原因。
标签在 Flex 容器内完全失效，因为换行由 Flex 布局引擎控制，而非文档流。
✅ 正确解法：为外层容器添加 flex-column 类，将主轴方向设为垂直（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" 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 是必需项：它将 Flex 主轴从 row 改为 column，使子元素自然垂直堆叠；
- 移除冗余
：Flex 布局中应使用间距工具类（如 mt-3、mb-4）替代
，语义清晰且响应式友好； - 控制宽度：为表单区域添加 w-100 max-w-sm 可防止在大屏下过宽，提升可读性；
- 表单语义优化：将 checkbox 包裹在 .form-check 中，并关联 for/id，符合 Bootstrap 5 最佳实践；
- 避免 height: 100vh 冲突：CSS 中移除自定义 body { height: 100vh }，因 Bootstrap 的 h-100 已足够，额外声明易导致内容溢出或滚动异常。
? 小贴士：如需在小屏堆叠、大屏横排，可使用响应式方向类，例如 flex-md-row —— 在 md 及以上断点切回水平布局。灵活组合 flex-* 工具类，是掌握 Bootstrap 5 Flex 布局的核心。
