我試圖獲得類似于嵌入影像中描述的結果。如果有任何區別，列寬應該相同，但我想使用垂直填充空間的非基于行的列。
對于這種型別的對齊，我在 Bootstrap 檔案中找不到任何代碼示例或任何提及。
uj5u.com熱心網友回復：
我想知道它是否適合您的網站用于col-4制作三個主要列，然后在每個列中，影像中的所有框都將是這些列中的一個自己的 Div。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="col-4 my-1" id="first-column">
<div class="text-box mb-1">
Text
</div>
<div class="text-box mb-1">
Text
</div>
</div>
<div class="col-4 my-1" id="second-column">
<div class="text-box mb-1">
Text
</div>
<div class="text-box mb-1">
Text
</div>
</div>
<div class="col-4 my-1" id="third-column">
<div class="text-box mb-1">
Text
</div>
<div class="text-box mb-1">
Text
</div>
</div>此外，如您所知，my-1將為您的列添加左右邊距，或者py-1如果您更喜歡填充而不是邊距，并mb-1在所有文本框的底部添加一點邊距，以便將它們分開一點。
此修復程式可能會導致移動觀看中的一個問題。第 1 列將始終位于頂部。第 2 列和第 3 列中的專案將始終位于頁面下方。
uj5u.com熱心網友回復：
您可以簡單地在每個主列中嵌套行并將內部列設定為全寬。
.col-12 {
background: pink;
}<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">
<div class="row">
<div class="col">
<div class="row">
<div class="col-12 my-1">Col 1A</div>
<div class="col-12 my-1 py-4">Col 1B</div>
<div class="col-12 my-1 py-3">Col 1C</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col-12 my-1 py-3">Col 2A</div>
<div class="col-12 my-1 py-4">Col 2B</div>
<div class="col-12 my-1 py-2">Col 2C</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col-12 my-1 py-4">Col 3A</div>
<div class="col-12 my-1">Col 3B</div>
<div class="col-12 my-1 py-2">Col 3C</div>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/375591.html
標籤：推特引导 bootstrap-5