bootstrap如何修改默认的圆角大小类（rounded）-Bootstrap教程-PHP中文网

应重定义 Sass 变量 $border-radius-values 或 CSS 变量 --bs-border-radius；仅改 $border-radius 不影响 rounded-2，因其由独立 map 控制；非 Sass 项目可用 :root 覆盖变量，自定义类需避免 !important 并确保加载顺序。

如何覆盖 Bootstrap 的 `rounded` 类默认圆角值

bootstrap 5+ 的 rounded 系列类（如 rounded、rounded-1 到 rounded-5）底层依赖 css 自定义属性 --bs-border-radius 和预设的 $border-radius sass 变量。直接在 html 里加 style="border-radius: 4px" 能临时覆盖，但无法复用或响应式控制，也不符合维护逻辑。

最稳妥的方式是**重定义 Sass 变量**后重新编译 —— 这能同步影响所有依赖圆角的组件（如 btn、card、dropdown）
若项目没接入 Sass，可用 :root 覆盖 CSS 变量：
```
:root { --bs-border-radius: 6px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 8px; }
```
注意：这仅对使用了这些变量的类生效（Bootstrap 5.3+ 全面迁移至此），旧版本需查文档确认变量支持范围
避免用 !important 单独覆盖某个 rounded 类 —— 容易和 rounded-circle、rounded-pill 冲突，且破坏 utility 优先级规则

为什么改了 `$border-radius` 但 `rounded-2` 没变

因为 rounded-* 类的数值不是直接映射变量，而是通过 Sass map $border-radius-values 生成的。默认值是：

(0: 0, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem, 5: 1.5rem, "circle": 50%, "pill": 50vh)

所以只改 $border-radius（它主要影响 rounded 无后缀类）不会动 rounded-2。

要统一调整所有层级，必须重定义整个 $border-radius-values map
若只想微调某一级（比如让 rounded-2 从 0.5rem 变成 6px），单独覆盖该键值即可：
```
$border-radius-values: map-merge($border-radius-values, (2: 6px));
```
注意单位一致性：混用 rem 和 px 可能导致缩放异常，尤其在根字体大小变动时

不编译 Sass 时如何安全添加自定义圆角类

Bootstrap 的 utility API 允许扩展，但需确保 class 名不冲突、优先级可控。直接写 .rounded-6 { border-radius: 12px !important; } 是危险的 —— !important 会干扰响应式断点类（如 rounded-md-3）的叠加逻辑。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

推荐用 Bootstrap 官方方式：在自定义 CSS 中按相同结构声明，不加 !important：
```
.rounded-6 { border-radius: 12px; }
```
并确保该 CSS 在 Bootstrap 主样式之后加载
若需响应式支持（如 rounded-md-6），得手动补全媒体查询，或借助 PostCSS 插件自动化生成
命名别用 rounded-custom 这类模糊名 —— 容易和未来 Bootstrap 版本新增的类撞名，建议带项目前缀，如 my-rounded-xl