如何无需自定义CSS仅用Bootstrap类移除移动端列的水平内边距？

你之前尝试的写法无法匹配默认内边距，核心是两个逻辑偏差：

• Bootstrap 5.0版本的栅格列默认水平内边距为左右各0.75rem，由row的gutter变量计算生成，但官方提供的px-*间距工具类没有对应0.75rem的档位：px-lg-2对应左右0.5rem、px-lg-3对应左右1rem，和默认值存在偏差，自然无法还原原生内边距效果。
• 栅格系统的列间距设计为通过row上的gutter类统一控制，直接给单个列添加px工具类属于绕过栅格逻辑的写法，很容易出现样式不匹配的问题。

完全使用Bootstrap自带类即可实现需求，不需要编写额外自定义CSS：
给包裹列的.row元素添加两个响应式水平gutter类：

• gx-0：所有断点下水平gutter为0，即列水平内边距为0
• gx-lg-4：lg断点（视口宽度≥992px）及以上，水平gutter恢复为默认的1.5rem，对应列左右各0.75rem的原生默认内边距，和无修改的col内边距效果完全一致。

.container{
  border:3px solid orange;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container">
  <div class="row gx-0 gx-lg-4">
    <div class="col-12 bg-light text-dark">A（默认样式参照）</div>
    <div class="col-12 bg-dark text-light">B</div>
    <div class="col-12 bg-light text-dark">C</div>
  </div>
</div>

补充说明：该写法不需要给单个列添加任何内边距相关类，所有列的内边距会自动跟随row的gutter规则生效。如果需要调整断点规则，替换类名的断点后缀即可，比如gx-md-0 gx-xl-4代表md断点以下移除列水平内边距，xl断点及以上恢复默认内边距。

内容的提问来源于stack exchange，提问作者Cédric