我使用Bootstrap 5,我嘗試在同一行放置一個選擇和兩個按鈕(選擇應該在中心,一個按鈕在選擇右側,另一個按鈕在左側),但我沒有成功兩件事情
- 在選擇和按鈕之間獲得相同的距離
- 在按鈕和 div 端之間獲得相同的距離。
如圖所示:選擇應該有大部分的空間,按鈕不應該接觸選擇,按鈕不應該接觸 div 端。問題在于按鈕和選擇之間的距離以及按鈕和 div 端之間的距離。
請看圖片。(在小螢屏上可以更清楚地看到問題)
HTML:(我不使用其他 CSS 檔案)
<div class="row mt-3 mb-2 text-center">
<div class="col-2">
<button class="btn btn-success">Prev</button>
</div>
<div class="col-8">
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-2">
<button class="btn btn-success">Next</button>
</div>
</div>
注意:邊框不包含在 html 中,我用 Paint 編輯器添加了邊框,只是為了更好地了解情況。
uj5u.com熱心網友回復:
我會使用簡單的flex 布局,而不是嘗試將列組合成形狀。在中心元素上使用flex-fill
以使其拉伸,并為間距添加水平(x 軸)邊距和填充。我使用兩者來匹配默認容器填充。如果您不使用容器,您當然可以使用其他組合。
body {
background: pink !important; /* for spacing visualization */
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid my-2">
<div class="d-flex justify-content-between">
<div>
<button class="btn btn-success">Prev</button>
</div>
<div class="flex-fill mx-2 px-1">
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div>
<button class="btn btn-success">Next</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
uj5u.com熱心網友回復:
我認為你應該使用 Flexbox 而不是這個,因為 flex 實際上是在容器中均勻分布專案的最佳方式。
<div class="row mt-3 mb-2 text-center" style="display: flex; justify-content: space-evenly"> <!-- You can also try space-around and space-between instead of space-evenly if that suits your purpose -->
<div class="col-2">
<button class="btn btn-success">Prev</button>
</div>
<div class="col-8">
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-2">
<button class="btn btn-success">Next</button>
</div>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/429646.html