如何覆盖Bootstrap预定义类？自定义CSS应用方法有哪些？

嘿，我来给你拆解一下怎么覆盖Bootstrap的预定义类，以及几种实用的自定义CSS方法——毕竟Bootstrap的默认样式虽好，但总有需要贴合自己项目风格的时候对吧？

首先得搞懂CSS优先级的底层逻辑：

• 若两个选择器权重相同，后加载的样式会覆盖先加载的
• 若选择器权重不同，权重更高的样式会生效（优先级：id选择器 > 类/属性选择器 > 标签选择器）

所以覆盖Bootstrap样式的核心思路，要么让你的自定义样式加载顺序靠后，要么提高选择器权重，或者用更优雅的预编译变量方式。

1. 直接修改Bootstrap源文件（不推荐） #

你可以直接找到Bootstrap的bootstrap.css或bootstrap.min.css文件，找到对应的预定义类（比如.btn-primary）修改样式。但这种方法有个致命问题：一旦Bootstrap版本升级，你的自定义修改会全部丢失，维护成本极高。

举个例子（仅作演示，不建议实际使用）：

/* 在bootstrap.css中修改 */
.btn-primary {
  color: #fff;
  background-color: #your-custom-color; /* 替换默认蓝色 */
  border-color: #your-custom-color;
}

2. 在自定义CSS文件中重写类（最常用） #

这是项目中最普遍的做法，核心是把你的自定义CSS文件放在Bootstrap CSS之后引入，利用加载顺序覆盖样式。

2.1 同权重直接覆盖 #

如果只是简单修改样式，直接写和Bootstrap一样的类名即可，因为后加载的CSS会覆盖前面的：

/* 自定义CSS文件（必须在Bootstrap CSS之后引入） */
.btn-primary {
  background-color: #your-custom-color;
  border-radius: 0.8rem; /* 自定义圆角 */
}

2.2 提高选择器权重（解决覆盖失效的情况） #

如果同权重覆盖不生效（比如Bootstrap的样式用了更具体的选择器），可以给自定义选择器加父元素来提高权重：

/* 给.btn-primary加上父容器选择器，提高权重 */
.container .btn-primary {
  background-color: #your-custom-color;
}

/* 或者用body作为父选择器，权重足够覆盖大部分情况 */
body .btn-primary {
  padding: 0.75rem 2rem; /* 自定义内边距 */
}

2.3 谨慎使用!important #

万不得已时（比如Bootstrap的样式加了!important），可以用!important强制覆盖，但要注意：这会破坏CSS的优先级规则，后续修改会更麻烦，能不用就不用。

.btn-primary {
  background-color: #your-custom-color !important;
}

3. 使用自定义类叠加（推荐） #

不直接修改Bootstrap的预定义类，而是新建一个自定义类，和Bootstrap类一起应用在元素上。这种方法不会破坏原类的样式，还能复用自定义样式，非常灵活。

示例：

<!-- 同时使用Bootstrap的.btn-primary和自定义的.my-custom-btn -->
<button class="btn btn-primary my-custom-btn">点击我</button>

/* 自定义类 */
.my-custom-btn {
  background-color: #your-custom-color;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影 */
}

4. 使用Sass/Less变量覆盖（优雅之选） #

如果你的项目用的是Bootstrap的Sass/Less预编译版本，可以直接修改变量来批量覆盖默认样式，这是最优雅的方式——不用一个个类去改，所有用到该变量的样式都会同步更新。

以Sass为例：

// 1. 先引入Bootstrap的变量文件
@import "bootstrap/scss/variables";

// 2. 覆盖你需要的变量
$primary: #your-custom-color; // 替换默认的蓝色主题色
$btn-border-radius: 0.5rem; // 自定义按钮圆角
$body-bg: #f8f9fa; // 自定义页面背景色

// 3. 最后引入Bootstrap核心文件
@import "bootstrap/scss/bootstrap";

5. 内联样式（仅临时测试用） #

直接在元素上写style属性，内联样式的权重最高，能直接覆盖所有外部样式。但这种方式不利于维护，只能用于临时调试，正式项目千万别用。

示例：

<button class="btn btn-primary" style="background-color: #your-custom-color;">点击我</button>

如果用预编译版Bootstrap → 变量覆盖 > 自定义类叠加 > 自定义CSS文件重写类 > 谨慎使用!important
如果用普通CSS版Bootstrap → 自定义类叠加 > 自定义CSS文件重写类 > 谨慎使用!important

内容的提问来源于stack exchange，提问作者Lawkush Prasad Vishwakarma