Bootstrap 5中如何在不换行的情况下为列添加间距？

我正在开发一个基于Bootstrap的客户评价模块，核心结构如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container">
    <div class="row"> <!-- 承载评价卡片的行 -->
        <div class="col"> <!-- 客户评价卡片内容 -->
        </div>
        <div class="col"> <!-- 客户评价卡片内容 -->
        </div>
    </div>
</div>

每个客户评价卡片内部还嵌套了更多row和col用于细节布局。

遇到的问题：当给承载卡片的row添加gap属性时，哪怕设置最小间距，卡片都会直接堆叠成单列，无法维持预期的两列并排布局。

我已经尝试过以下方法，但都没有解决问题：

• 使用row-cols-2类强制列数
• 给卡片添加w-50、col-6（及更小尺寸类）尝试缩小卡片宽度
• 移除包裹row和卡片的container类

效果对比：

• 预期效果：两列客户评价卡片并排显示，带有合理的间距
• 实际效果：所有卡片堆叠为单列显示

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