bootstrap 5 間距錯位

Question

我有一些 HTML/CSS，我試圖在其中使用 Bootstrap 5.2 和justify-content-between將 2 個按鈕推出到容器的邊緣。

<div class="container">
    <div class="row">
        <div class="col-12">
            <ul class="d-flex justify-content-center align-items-center bg-grey">
                <li>Test</li>
            </ul>
        </div>
        <div class="col-12">
            <div class="row justify-content-between">
                <div class="col-2 text-start">
                    <button class="btn btn-primary btn-lg">LEFT</button>    
                </div>
                <div class="col-2 text-end">
                    <button class="btn btn-primary btn-lg">RIGHT</button>
                </div>
            </div>
        </div>
    </div>
</div>

這就是我想要的樣子—— LEFT按鈕和RIGHT按鈕與邊緣對齊。

在視口達到 768px 寬（sm 或 xs）以下的任何東西之前都很好，此時RIGHT按鈕突出。

我可以在相關的響應斷點處調整邊距，但似乎我出了點問題，不應該這樣做。

有沒有正確/更好的方法來實現這一目標？

Answer 1

你可以試試這個：

<div class="container">
  <div class="row">
    <div class="col-12">
      <ul class="d-flex justify-content-center align-items-center bg-dark">
        <li>Test</li>
      </ul>
    </div>
    <div class="col-12">
      <div class="row justify-content-between">
        <div class="col text-start">
          <button class="btn btn-primary btn-lg">LEFT</button>
        </div>
        <div class="col text-end">
          <button class="btn btn-primary btn-lg">RIGHT</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

第二次嘗試時，行中有行。 row需要是container的直接子代。

如果您不需要 Bootstrap 網格提供的列折疊，我可能會在這里使用一些明確的彈性框：

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-12"> <div class="d-flex flex-column"> <ul style='background:grey' class="d-flex justify-content-center align-items-center bg-grey"> <li>Test</li> </ul> </div> <div class="d-flex justify-content-between"> <button class="btn btn-primary btn-lg">LEFT</button> <button class="btn btn-primary btn-lg">RIGHT</button> </div> </div> </div> </div>

一個用於堆疊它們的彈性框列，然后是一個用於按鈕的彈性框行。 當前的.container元素並不是真正必需的，但它會保留您擁有的填充。