Bootstrap 5中如何修改默认的-bs-gutter-x:1.5rem属性

复刻网站时，发现container-fluid容器的左右内边距无法通过设置padding: 0消除。在开发者工具中取消-bs-gutter-x: 1.5rem;的勾选后，内边距消失，但手动设置左右padding为0无效。

相关代码：
CSS：

.ct1 {
    background-color: black;
    color: white;
    height: 350px;
}

HTML：

<div class="container-fluid ct1">
    <h1>IN-STORE & ONLINE</h1>
    <h4>BLACK Friday 30% OFF-70% OFF EVERYTHING</h4>
    <h4>SHOP NOW </h4>
    <h4>Taxes excluded. Offer applicable in local currency for international customers. Go to Special Offers Page to see Exclusions & Restrictions</h4>
</div>

如何通过修改-bs-gutter-x属性解决这个问题？

解决方案 #

方法1：直接覆盖-bs-gutter-x变量 #

Bootstrap的container-fluid内边距由-bs-gutter-x变量计算而来，你可以在自定义CSS中直接覆盖该变量，确保你的CSS文件在Bootstrap之后加载：

.ct1 {
    background-color: black;
    color: white;
    height: 350px;
    --bs-gutter-x: 0; /* 将gutter变量设为0，从根源消除内边距 */
}

方法2：结合Bootstrap内置类强化效果 #

如果需要更稳妥的效果，可以同时添加Bootstrap内置的px-0类（直接设置左右padding为0），再配合变量覆盖：

<div class="container-fluid ct1 px-0">
    <!-- 容器内容 -->
</div>

CSS保持和方法1一致即可。

为什么直接设置padding:0无效？ #

Bootstrap对container-fluid的内边距样式优先级较高，它通过:root定义的-bs-gutter-x变量动态计算内边距值，直接写padding:0会被框架内置样式覆盖。而覆盖-bs-gutter-x变量，能从计算逻辑上消除内边距的来源。

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