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

Question

我正在尝试创建一个网格系统，将页面拆分为彼此独立的 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 个“col-6”列，但我尝试过的每一种方法要么导致堆叠的列，要么导致列的高度拉伸以匹配相邻的列。

我还尝试使用 2 列和 2 行，将它们的宽度限制为 50%，但这导致行堆叠（很明显）或 stacked/height 调整列。

我希望有一个页面，我在页面左侧显示一个事物的统计表，在页面右侧显示其他事物的统计表。

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

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

Answer 2

来自的解决方案。

添加了一些样式以显示行和列

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

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

Bootstrap 5 - Grid System - How to split a page vertically (2 Vertical Independent Rows, Cols or Containers)

html

css

grid

layout

bootstrap-5