在使用Bootstrap进行网页布局时，开发者常遇到元素默认并排显示而非垂直堆叠的问题，尤其当父容器应用了Flexbox布局时。本文将深入探讨这一常见布局挑战，并提供解决方案：通过调整Flex容器的flex-direction属性为column，利用Bootstrap的flex-column工具类，实现H1标签与表单等内容块的正确垂直排列，确保页面结构符合预期。

Flexbox布局中的默认行为与常见误区

现代网页布局中，Flexbox（弹性盒子）模型因其强大的对齐和分布能力而广受欢迎。Bootstrap框架也大量依赖Flexbox来实现其网格系统和组件布局。然而，Flexbox的一个默认行为常常让初学者感到困惑：当一个容器被设置为display: flex时，其直接子元素（即Flex项目）会默认沿主轴（flex-direction: row）并排排列。

在Bootstrap中，诸如d-flex、row或col等类都会隐式地将元素设置为Flex容器。例如，col类本身就包含display: flex的样式，而d-flex则显式地将元素转换为Flex容器。当这些Flex容器的子元素预期垂直堆叠时，却发现它们并排显示，这通常是由于未显式设置或覆盖flex-direction属性导致的。

核心解决方案：调整Flex方向为垂直堆叠

要解决元素并排显示的问题，核心在于改变Flex容器的主轴方向。Flexbox提供了flex-direction属性来控制Flex项目在容器中的排列方向。当设置为column时，Flex项目将沿垂直方向（从上到下）堆叠。

在Bootstrap中，实现这一目标的最便捷方式是使用其提供的flex-column工具类。将此flex-column类添加到Flex容器上，即可将其主轴方向从默认的水平（row）更改为垂直（column），从而使子元素垂直堆叠。

实战案例分析与代码演示

考虑以下一个常见的布局场景：在一个Bootstrap列内，我们希望一个

标题和一个