我正在嘗試創建一個網格系統，將頁面拆分為 2 列或 2 行，彼此獨立，這意味著頁面右側的部分不會擴展以匹配左側的部分這一頁。
我知道我可以使用下面的代碼創建以下網格。
但是通過這種方式，列將始終將其高度擴展到 100% 以匹配其行中最高的列。
<div class="container">
<div class="row">
<div class="col-lg-6">
Row 1 Col 1
</div>
<div class="col-lg-6">
Row 1 Col 2
</div>
</div>
<div class="row">
<div class="col-lg-6">
Row 2 Col 1
</div>
<div class="col-lg-6">
Row 2 Col 2
</div>
</div>
</div>
我需要這樣的布局...
我嘗試使用 2 x "col-6" 列，但我嘗試過的每種方法都會導致堆積的列或伸展高度以匹配相鄰列的列。
我還嘗試使用 2 列和 2 行，將它們的寬度限制為 50%，但這導致堆疊行（顯然）或堆疊/高度調整列。
我希望有一個頁面，我可以在頁面左側顯示一件事的統計資料表，并在頁面右側顯示其他內容的統計資料。
表格不會等高，我不希望頁面的另一側與它們的高度相匹配。
提前感謝您的任何提示。我剩下的發際線很感激你。
uj5u.com熱心網友回復：
您說您已經嘗試過col-6* 2，但這應該是解決方案。就像是：
<div class='row'>
<div class='col-6'>
<div class='row'>
<div class='col-12'>A</div>
<div class='col-12'>B</div>
<div class='col-12'>C</div>
</div>
</div>
<div class='col-6'>
<div class='row'>
<div class='col-12'>D</div>
</div>
</div>
</div>
這樣，螢屏將始終有 2 個半寬列，并且每隔一列將是父列的全寬col（即螢屏的 50%）。colwith A, B, C 只會取它們的高度，而不會匹配其他col. 與 D 相同。
uj5u.com熱心網友回復：
Siddharth Bhansali 的答案的解決方案
我之前將此作為對我的問題的編輯發布，希望解決方案的可視化表示可以幫助任何也在為此苦苦掙扎的人，admin/mods 對其進行了編輯。
（@Admin/Mods - 抱歉，如果這也是發布解決方案的不正確方式。如果是這種情況，請告知正確的做法）
添加了一些樣式只是為了顯示行和列
<div class='row' style="background-color: #009900; padding: 5px;">
<div class='col-lg-6' style="background-color: #990000;">
<div class='row' style="background-color: #000099; padding: 5px;">
<div class='col-12'style="background-color: #FFFFFF; padding: 5px;">A</div>
</div>
<div class='row' style="background-color: #000099; padding: 5px;">
<div class='col-12'style="background-color: #FFFFFF; padding: 5px;">B</div>
</div>
<div class='row' style="background-color: #000099; padding: 5px;">
<div class='col-12'style="background-color: #FFFFFF; padding: 5px;">C</div>
</div>
</div>
<div class='col-lg-6' style="background-color: #990000;">
<div class='row' style="background-color: #000099; padding: 5px;">
<div class='col-12' style="background-color: #FFFFFF; padding: 5px;">D</div>
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/384461.html
標籤：html css 布局 网格 bootstrap-5