bootstrap怎么修改按钮组的圆角弧度-Bootstrap教程-PHP中文网

直接改 .btn-group 的圆角无效，是因为 Bootstrap 默认将内部按钮左右边框合并并设为 border-radius: 0，导致单个按钮加圆角无视觉效果；正确做法是覆盖所有按钮的 border-radius 并单独修复首尾按钮外侧圆角。

直接改 `.btn-group` 的圆角为什么无效？

因为 bootstrap 默认把 .btn-group 内部按钮的左右边框「合并」了（通过 border-radius: 0 强制抹平衔接处），所以即使你给单个 .btn 加 .rounded，或改 border-radius，视觉上依然看不出弧度——中间按钮的左右两侧被“削平”了。

正确做法：覆盖默认边框半径 + 控制首尾按钮

必须同时处理三件事：重置中间按钮的水平圆角、保留首尾按钮的外侧圆角、确保边框不塌陷。Bootstrap 5+ 默认用 border-collapse: separate（对按钮组不适用，但思路一致）——这里靠 CSS 覆盖：

给 .btn-group 加 overflow: hidden（可选，防溢出）

重置所有按钮的 border-radius，例如：

.btn-group > .btn {
  border-radius: 8px !important;
}

再单独修正首尾按钮的「外露角」：

.btn-group > .btn:first-child {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}
.btn-group > .btn:last-child {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

想全局统一修改？改 Sass 变量最省事

如果你用的是 Bootstrap 源码（Sass 版本），直接改 $border-radius 或 $border-radius-sm/$border-radius-lg 变量，所有组件（包括按钮组里的按钮）会自动同步更新。但注意：.btn-group 自身不响应这个变量，它只影响内部 .btn 的基础样式；所以仍需确保没其他规则（比如 .btn-group > .btn 的硬编码 border-radius: 0）把它又压回去。