Bootstrap 5 - 网格系统 - 如何垂直拆分页面（2 个垂直独立行、列或容器）答案

【问题标题】：Bootstrap 5 - Grid System - How to split a page vertically (2 Vertical Independent Rows, Cols or Containers)Bootstrap 5 - 网格系统 - 如何垂直拆分页面（2 个垂直独立行、列或容器）
【发布时间】：2022-01-20 13:58:54
【问题描述】：

我正在尝试创建一个网格系统，将页面分成相互独立的 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%，但这会导致堆叠行（显然）或堆叠/高度调整列。

我希望有一个页面，可以在页面左侧显示某件事的统计数据表，并在页面右侧显示其他内容的统计数据。

表格的高度不相等，我不希望页面的另一侧与它们的高度匹配。

【问题讨论】：

标签： html css layout grid bootstrap-5

【解决方案1】：

您说您尝试过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%）。 col 与 A、B、C 只会取它们的高度，不会匹配其他 col。与 D 相同。

【讨论】：

感谢悉达多！我知道这是可能的，但由于某种原因，我的大脑不会带我去那里。我非常感谢您的帮助，网格完美运行。我将发布代码和图像作为问题的编辑，对于遇到此问题的任何其他人，再次感谢！这是 100% 的正确答案。

【解决方案2】：

来自Siddharth Bhansali's answer的解决方案。

添加一些样式只是为了显示行和列

<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>

【讨论】：