能否将Bootstrap类属性写入CSS文件？如何结合其特性与自定义CSS？

没问题，我来帮你理清楚这个问题，一步步解决：

首先先搞懂你困惑的$spacer：它是Bootstrap 4核心的Sass变量，默认值是1rem（一般对应浏览器默认的16px，除非你修改了根元素html的字体大小）。官方文档里的数字就是这个变量的倍数：

• 0：直接设为0，和$spacer无关
• 1：$spacer * .25 → 默认是0.25rem（也就是4px）
• 2：$spacer * .5 → 默认是0.5rem（8px）
• 更高的数字以此类推，比如3是1rem（16px）、4是1.5rem（24px）

接下来，根据你的项目是否使用Sass，给你两种靠谱的实现方案：

方案一：用Sass（推荐，完美对齐Bootstrap风格） #

如果你的项目是基于Sass构建的（比如用了Bootstrap的Sass源码），直接复用Bootstrap的变量就行，这样后续如果你修改$spacer的值，自定义类的间距会自动同步，完全不用手动调整：

// 自定义类，完全等价于ml-0 px-0的效果
.custom-spacing {
  margin-left: 0; // 对应ml-0
  padding-left: 0; // 对应pl-0
  padding-right: 0; // 对应pr-0（px-0就是pl-0 + pr-0的简写）
}

// 举个其他例子：如果要实现ml-2 px-1的效果
.custom-other-spacing {
  margin-left: $spacer * .5; // 对应ml-2
  padding-left: $spacer * .25; // 对应pl-1
  padding-right: $spacer * .25; // 对应pr-1
}

把这段Sass编译成CSS后，你就可以直接在HTML里用<div class="custom-spacing">代替原来的ml-0 px-0了，省心又统一。

方案二：纯CSS（无需Sass环境） #

如果你的项目直接用Bootstrap的成品CSS文件，不用Sass，那直接用rem单位写对应的数值就行——这和Bootstrap默认的间距规则完全一致，不会出现风格冲突：

/* 自定义类，等价于ml-0 px-0 */
.custom-spacing {
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

/* 示例：实现ml-2 px-1的效果 */
.custom-other-spacing {
  margin-left: 0.5rem; /* 对应$spacer * .5，默认是8px */
  padding-left: 0.25rem; /* 对应$spacer * .25，默认是4px */
  padding-right: 0.25rem;
}

用rem而不是px的好处是，当用户调整浏览器字体大小，或者你修改根元素字体时，自定义类的间距会自动适配，不会出现布局错位的问题。

最后提个小建议：如果项目支持Sass，优先用方案一，后续维护起来更方便；如果只能用纯CSS，记得如果以后修改了Bootstrap的$spacer值（或者自己改了根字体大小），要手动同步自定义类的数值哦。

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