row-col 布局实现默认间距

在使用 row-col 布局时，如何定义并设置组件之间的上下间距？

问题详情：

<p>代码</p>

<footer id="footer">
    <div class="rxc-wrap el-page-container bg-dark text-light">
        <div class="container py-5">
            <div class="row">
                <div class="col-12 col-lg-3">
                    <h4 class="el-title font-weight-normal mb-3 pb-2">About</h4>
                    <ul class="list-unstyled mb-0 d-flex flex-column" style="gap: .5rem">
                        <li>
                            <a href="?part=about-headmaster" class="text-light">Headmaster</a>
                        </li>
                        <li>
                            <a href="?part=about-our-values" class="text-light">Our Values</a>
                        </li>
                        <li>
                            <a href="?part=about-history" class="text-light">History</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

<p>使用 gap 属性可以定义 li 之间的上下间距，但是要如何定义 col 的上下间距？ row 外面有一层 padding，直接给 col 设置 margin-bottom 会导致底下内容被撑开。</p>

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

解决方案：

给 div.row 添加 row-gap: 2rem;。