<div class="container">
  <div class="row">

    <div class="col-sm">
    </div>

    <!-- 关键修改：添加 flex-column 类 -->
    <div class="col-sm d-flex justify-content-center flex-column col-sm-8 mt-5">
      <div><h1>Text &#128075;</h1></div>

      <div>
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

    </div>

    <div class="col-sm">
    </div>

  </div>
</div>

效果解释： 通过添加flex-column类，父div现在将flex-direction设置为column。这意味着其子元素（

和

布局注意事项与最佳实践

1. 理解Flexbox原理： 掌握display: flex、flex-direction、justify-content和align-items等核心属性的工作方式至关重要。这有助于在不依赖特定框架的情况下解决布局问题，并能更好地利用Bootstrap的Flexbox工具类。
2. 选择合适的容器： 并非所有元素都需要Flexbox布局。块级元素（如div、p、h1、form）本身就会垂直堆叠。只有当需要Flexbox提供的对齐、间距、响应式排序等高级特性时，才应将容器设置为Flex。在上述示例中，如果不需要水平居中，直接将d-flex移除，h1和form也会自然垂直堆叠。
3. 响应式设计： Bootstrap提供了响应式Flexbox类，如flex-column-sm、flex-column-md、flex-column-lg和flex-column-xl。这些类允许您在不同屏幕尺寸下动态调整Flex容器的flex-direction，实现更灵活的响应式布局。例如，您可以在小屏幕上垂直堆叠，在大屏幕上并排显示。
4. 避免过度嵌套： 复杂的Flexbox嵌套结构可能导致样式冲突，增加调试难度。尽量保持Flex容器及其子元素的结构扁平化，或确保每一层Flex容器都有明确的布局意图。
5. 调试技巧： 当布局不符合预期时，利用浏览器开发者工具是排查问题的最佳方法。检查元素的display属性是否为flex，以及flex-direction、justify-content和align-items等Flexbox属性的计算值，可以快速定位问题所在。

总结

在Bootstrap的Flexbox布局中，理解flex-direction属性及其与d-flex等类的交互是实现精确布局的关键。当遇到元素并排显示而预期垂直堆叠的情况时，通常意味着需要将Flex容器的flex-direction从默认的row更改为column。通过简单地在Flex容器上添加flex-column类，可以高效且优雅地解决这一常见的布局挑战，确保页面内容按照设计意图正确呈现。掌握这些Flexbox基础知识，将极大地提升您的网页布局能力。