Bootstrap怎么修改默认的按钮Button圆角大小-Bootstrap教程-PHP中文网

应于引入 bootstrap sass 前重定义 $border-radius、$border-radius-sm、$border-radius-lg 等变量并重新编译，仅改 $border-radius 不足，因 .btn-sm/.btn-lg 等依赖各自独立变量，且加载顺序错误或未编译将导致失效。

bootstrap怎么修改默认的按钮button圆角大小

如何覆盖 Bootstrap 的 `$border-radius` Sass 变量

Bootstrap 5 默认按钮圆角是 0.375rem（即 6px），改它最干净的方式是在编译前重定义 Sass 变量。直接改 CSS 类容易漏掉 .btn-sm、.btn-lg 或 .btn-outline-* 等变体，而变量驱动的方式能全局生效。

你需要在引入 Bootstrap 的 Sass 文件前，先声明自定义变量：

$border-radius: 0.25rem; // 全局圆角，影响所有带圆角的组件
$border-radius-sm: 0.125rem;
$border-radius-lg: 0.5rem;
@import "bootstrap/scss/bootstrap";

只改 $border-radius 就够了——.btn 直接用它；.btn-sm 和 .btn-lg 分别用 $border-radius-sm 和 $border-radius-lg
如果项目没用 Sass 编译流程，这条路走不通，得换方案
别用 !important 覆盖，否则会破坏 Bootstrap 响应式圆角逻辑（比如 btn-lg 在移动端可能被强制拉平）

纯 CSS 覆盖时该选哪个选择器

如果你用的是 Bootstrap CDN 或已编译的 CSS，只能靠 CSS 覆盖。关键不是写 .btn { border-radius: 4px !important }，而是要匹配 Bootstrap 原始规则的特异性（specificity）。

Bootstrap 5 的按钮圆角定义在 .btn 上，但部分变体（如 .btn-outline-primary）可能被后续规则覆盖。稳妥写法是：

Bootstrap

Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。

下载

.btn {
  border-radius: 0.25rem !important;
}
.btn-sm {
  border-radius: 0.125rem !important;
}
.btn-lg {
  border-radius: 0.5rem !important;
}

必须加 !important，因为 Bootstrap 的原始规则里也用了 !important（尤其在 bootstrap-grid.css 或某些工具类中）
不要只覆盖 .btn，否则 .btn-sm 还是保持默认的 0.25rem（Bootstrap 5 中 .btn-sm 的圆角其实是 $border-radius-sm，值为 0.25rem，和基础 .btn 一样，但逻辑上独立）
如果用了 btn-outline-*，它们的圆角继承自 .btn，所以不用单独处理

为什么改了还是不生效？常见干扰项

最常见的“改了没反应”，往往不是代码写错，而是被其他样式或加载顺序干扰。

检查是否在 Bootstrap CSS 之后才加载你的自定义 CSS——顺序反了就完全无效
确认没同时引入多个 Bootstrap 版本（比如页面里既有 v4 CDN 又有 v5 JS），v4 的 $border-radius 是 0.25rem，v5 是 0.375rem，混用会导致行为不一致
浏览器 DevTools 里看计算样式（Computed），点开 border-radius 查看哪条规则胜出；如果看到 border-radius: 0.375rem 来自 bootstrap.min.css:1，说明你的 CSS 没生效或被覆盖
某些 UI 库（如 AdminLTE、SB Admin）会二次封装 .btn 并加自己的圆角规则，这时得查它们的文档或 CSS 源码