Bootstrap 5.3 垂直与水平混合卡片布局（带Gutter间距）

解决这个问题的核心是利用Bootstrap的弹性布局工具，替代固定高度设置，让卡片既能保持间距又能和同行卡片等高：

• 给左侧包含两张卡片的列添加 d-flex flex-column gap-2：
  • 把列转为垂直方向的弹性容器，gap-2 直接实现两张卡片间的间距，不会像 mb-2 那样破坏整体高度
• 移除两张卡片的 h-50，换成 flex-grow-1：
  • 让卡片自动填充容器内的可用空间，确保两张卡片总高度和右侧的 h-100 卡片完全一致，同时支持内容动态变化时的高度自适应

修改后的完整代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row g-2 mb-2">
    <div class="col-xl-3 col-lg-6 col-sm-6 d-flex flex-column gap-2">
        <div class="card flex-grow-1 text-bg-warning">
            <div class="card-header">
                <div class="text-uppercase"><strong>Vertical card 1</strong></div>
            </div>
            <div class="card-body">
                Adding an mb-2 to this card pushes Vertical Card 2 below the height of the Quarter-Width Card.
            </div>
        </div>
        <div class="card flex-grow-1 text-bg-info">
            <div class="card-header">
                <div class="text-uppercase"><strong>Vertical card 2</strong></div>
            </div>
            <div class="card-body">Add a spacer between the two vertical cards.</div>
        </div>
    </div>
    <div class="col-xl-3 col-lg-6 col-sm-6">
        <div class="card h-100 mb-2 text-bg-danger">
            <div class="card-header">
                <div class="text-uppercase"><strong>Quarter-width card</strong></div>
            </div>
            <div class="card-body" style="height: 300px">A larger amount of text will go here.</div>
        </div>
    </div>
    <div class="col-xl-6 col-lg-12">
        <div class="card h-100 mb-2 text-bg-success">
            <div class="card-header">
                <div class="text-uppercase"><strong>Half-width card</strong></div>
            </div>
            <div class="card-body"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card mb-2 text-bg-primary">
            <div class="card-header">
                <div class="text-uppercase"><strong>Full-width card</strong></div>
            </div>
            <div class="card-body"></div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Rethic