Bootstrap 5中如何移除所有的圆角样式-Bootstrap教程-PHP中文网

bootstrap 5 默认组件圆角无法通过 .rounded-0 移除，因其圆角由各组件独立 css 规则定义；全局移除需用 * { border-radius: 0 !important; } 或按组件精细覆盖，但需注意视觉断裂与动画兼容性问题。

bootstrap 5中如何移除所有的圆角样式

Bootstrap 5 默认会给很多组件加圆角（比如按钮、输入框、卡片、图像、列表项等），想全局移除，不能只靠单个 .rounded-0 类——它只对图像或带 rounded 类的元素生效，对 .btn 或 .form-control 无效。

为什么 `.rounded-0` 不起作用？

因为 .rounded-0 是专门针对「显式应用了圆角类」的元素设计的，比如 <img class="rounded"> 或 <div class="rounded-pill">。而 Bootstrap 内置组件（如 <code>.btn、.form-select、.list-group-item）的圆角是写死在它们各自的 CSS 规则里的，不依赖 rounded 工具类。

常见错误现象：

给按钮加 class="btn rounded-0"，圆角依然存在
用 .list-group-flush 虽能去掉列表边框和部分圆角，但首尾项仍可能残留 border-radius
覆盖 border-radius 时没加 !important，被 Bootstrap 的 specificity 压制

直接覆盖所有 `border-radius` 的 CSS 规则

最可靠的方式是重置全局 border-radius，优先级必须高于 Bootstrap 默认样式：

* {
  border-radius: 0 !important;
}

这个规则会命中所有元素，包括：

.btn、.btn-primary 等按钮类
.form-control、.form-select、.input-group
.card、.navbar、.dropdown-menu
.list-group-item（即使没加 .list-group-flush）

注意：如果项目中用了深色模式或主题切换，这个通配符会影响所有主题下的圆角；若只需默认主题下直角，可限定 scope，例如：

VPS Bootstrap

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

下载

.theme-default * {
  border-radius: 0 !important;
}

按组件精细控制，避免过度重置

如果你只想干掉特定组件的圆角，又不想用通配符影响其他样式，推荐逐个覆盖：

按钮：.btn { border-radius: 0 !important; }
表单控件：.form-control, .form-select, .form-check-input { border-radius: 0 !important; }
卡片与导航栏：.card, .navbar, .dropdown-menu { border-radius: 0 !important; }
列表组项：.list-group-item { border-radius: 0 !important; }（比 .list-group-flush 更彻底）

这种写法兼容性更好，也方便未来局部恢复某类圆角（比如只给 .card 加回 rounded-2）。