Bootstrap中.container-fluid自定义左右内边距不生效求助

1. 提升选择器优先级 #

Bootstrap通过包含.container-fluid的群组选择器定义了容器基础样式，和你单独写的.container-fluid选择器优先级相同。如果自定义CSS在Bootstrap之前加载，就会被覆盖。可以用更具体的选择器提升优先级：

body .container-fluid {
    padding: 3% 15%;
}

应急情况下也可以用!important强制覆盖（不推荐长期使用，会增加样式维护难度）：

.container-fluid {
    padding: 3% 15% !important;
}

2. 调整CSS加载顺序 #

把自定义CSS文件放在Bootstrap CSS之后引入，相同优先级的样式，后加载的会覆盖先加载的：

<!-- 先引入Bootstrap样式 -->
<link rel="stylesheet" href="path/to/bootstrap.css">
<!-- 再引入自定义样式 -->
<link rel="stylesheet" href="path/to/your-custom.css">

3. 重写Bootstrap的CSS变量 #

Bootstrap容器的左右内边距是通过--bs-gutter-x变量计算的，你可以单独给.container-fluid重新定义这个变量，或者直接覆盖计算后的padding属性：

.container-fluid {
    /* 方式1：修改变量，让左右padding基于新变量计算 */
    --bs-gutter-x: 30%;
    /* 方式2：直接覆盖padding值，绕过变量计算 */
    padding-right: 15%;
    padding-left: 15%;
    padding-top: 3%;
    padding-bottom: 3%;
}

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