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

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

    <!-- 關(guān)鍵修改：添加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現(xiàn)在將flex-direction設(shè)置為column。這意味著其子元素（

和

佈局注意事項與最佳實踐

1. 理解Flexbox原理：掌握display: flex、flex-direction、justify-content和align-items等核心屬性的工作方式至關(guān)重要。這有助於在不依賴特定框架的情況下解決佈局問題，並能更好地利用Bootstrap的Flexbox工具類。
2. 選擇合適的容器：並非所有元素都需要Flexbox佈局。塊級元素（如div、p、h1、form）本身就會垂直堆疊。只有當(dāng)需要Flexbox提供的對齊、間距、響應(yīng)式排序等高級特性時，才應(yīng)將容器設(shè)置為Flex。在上述示例中，如果不需要水平居中，直接將d-flex移除，h1和form也會自然垂直堆疊。
3. 響應(yīng)式設(shè)計： Bootstrap提供了響應(yīng)式Flexbox類，如flex-column-sm、flex-column-md、flex-column-lg和flex-column-xl。這些類允許您在不同屏幕尺寸下動態(tài)調(diào)整Flex容器的flex-direction，實現(xiàn)更靈活的響應(yīng)式佈局。例如，您可以在小屏幕上垂直堆疊，在大屏幕上並排顯示。
4. 避免過度嵌套：複雜的Flexbox嵌套結(jié)構(gòu)可能導(dǎo)致樣式衝突，增加調(diào)試難度。盡量保持Flex容器及其子元素的結(jié)構(gòu)扁平化，或確保每一層Flex容器都有明確的佈局意圖。
5. 調(diào)試技巧：當(dāng)佈局不符合預(yù)期時，利用瀏覽器開發(fā)者工具是排查問題的最佳方法。檢查元素的display屬性是否為flex，以及flex-direction、justify-content和align-items等Flexbox屬性的計算值，可以快速定位問題所在。

總結(jié)

在Bootstrap的Flexbox佈局中，理解flex-direction屬性及其與d-flex等類的交互是實現(xiàn)精確佈局的關(guān)鍵。當(dāng)遇到元素並排顯示而預(yù)期垂直堆疊的情況時，通常意味著需要將Flex容器的flex-direction從默認(rèn)的row更改為column。通過簡單地在Flex容器上添加flex-column類，可以高效且優(yōu)雅地解決這一常見的佈局挑戰(zhàn)，確保頁面內(nèi)容按照設(shè)計意圖正確呈現(xiàn)。掌握這些Flexbox基礎(chǔ)知識，將極大地提升您的網(wǎng)頁佈局能力。