如何在Bootstrap 5中为不同屏幕设置自定义内边距与最大宽度

一、实现移动端/桌面端的内边距与最大宽度 #

Bootstrap默认的p-*类基于固定间距值，无法直接实现百分比内边距，可通过以下两种方式实现需求：

方式1：自定义CSS + Bootstrap断点 #

直接编写自定义样式，利用Bootstrap的lg断点（对应≥992px的桌面设备）：

<div class="container-fluid">
    <div class="row custom-row">
        <div class="col">
            Some text
        </div>
        <div class="col">
            More text
        </div>
    </div>
</div>

<style>
.custom-row {
    padding: 1rem; /* 对应Bootstrap p-3的默认值 */
    max-width: 100%;
}

/* 桌面端样式 */
@media (min-width: 992px) {
    .custom-row {
        padding: 20%;
        max-width: 70%;
        margin: 0 auto; /* 让row在container-fluid中居中 */
    }
}
</style>

方式2：Sass自定义工具类（适合全局复用） #

如果项目用Sass编译Bootstrap，可自定义响应式工具类：

// 桌面端20%内边距类
@include media-breakpoint-up(lg) {
    .p-lg-20 {
        padding: 20%;
    }
}

// 最大宽度类
.max-w-100 {
    max-width: 100%;
}

@include media-breakpoint-up(lg) {
    .max-w-lg-70 {
        max-width: 70%;
    }
}

HTML中直接调用：

<div class="container-fluid">
    <div class="row p-3 p-lg-20 max-w-100 max-w-lg-70 mx-auto">
        <div class="col">
            Some text
        </div>
        <div class="col">
            More text
        </div>
    </div>
</div>

二、设置大于p-5的内边距 #

Bootstrap默认间距工具类最大到p-5（默认值3rem），实现更大内边距有两种方案：

方式1：自定义CSS类 #

直接编写固定值或响应式的自定义类：

// 全局更大内边距
.p-6 {
    padding: 4rem; /* 比p-5的3rem更大 */
}

// 仅桌面端生效的更大内边距
@media (min-width: 992px) {
    .p-lg-6 {
        padding: 4rem;
    }
}

HTML使用示例：

<div class="row p-3 p-lg-6">...</div>

方式2：修改Bootstrap Sass变量（全局生效） #

通过重定义Bootstrap的间距变量扩展层级：

$spacers: (
    0: 0,
    1: $spacer * .25,
    2: $spacer * .5,
    3: $spacer,
    4: $spacer * 1.5,
    5: $spacer * 3,
    6: $spacer * 4, // 新增p-6
    7: $spacer * 5  // 新增p-7
);

重新编译Bootstrap后，即可直接使用p-6、p-lg-7这类工具类。

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