先理清修改顺序
直接改 bootstrap.css 是下策，升级或换版本时全部丢失。推荐顺序：先改 Sass 变量，再写自定义 CSS 覆盖，最后才动 HTML 结构。这样改动可维护，也避免选择器权重打架。
用 Sass 变量改配色与圆角
如果你用的是 Bootstrap 源码版，找到 _variables.scss，在导入 Bootstrap 之前覆盖：
$primary: #0d6efd;
$border-radius: 0.5rem;
$font-family-sans-serif: “PingFang SC”, “Microsoft YaHei”, sans-serif;
@import “bootstrap”;
关键点：变量必须在 @import "bootstrap" 之前声明，否则不生效。改完重新编译，所有按钮、链接、边框颜色会同步更新，比逐个类名覆盖省事得多。
调整栅格与容器宽度
模板默认容器最大宽度常为 1140px 或 1320px。改 $container-max-widths 可整体缩放：
$container-max-widths: (
sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px
);
如果只想改某一断点，单独覆盖对应键值即可。注意栅格列数由 $grid-columns 控制，默认 12，非必要不要改，否则大量 col-* 类需要重写。
覆盖组件样式而不破坏响应式
导航栏、卡片、按钮是最常改的三个组件。建议用浏览器开发者工具定位类名，再写针对性覆盖：
.navbar {
background-color: #1f2937;
}
.card {
border: none;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
避免使用 !important，优先靠选择器权重和加载顺序解决。自定义 CSS 放在 Bootstrap 之后引入，覆盖才稳定。
常见坑与检查清单
- 改了变量没重新编译，页面无变化；
- 直接删 HTML 里的
col-*类导致移动端错位； - 字体文件路径未同步调整，出现 404；
- 忘记测试 576px、768px、992px 三个断点。
修改完成后，用浏览器响应式模式逐断点检查，确认导航折叠、卡片换行、按钮尺寸都正常，再上线。
