<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 👋</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基礎知識，將極大地提升您的網頁佈局能力。