如何去除b-form-radio-group间距 让单选按钮填满列空间

使用b-form-radio-group并开启buttons属性时，组件默认会给每个单选按钮挂载form-check-inline类，Bootstrap原生对该类设置了左右外边距，加上原有外层容器设置为display: inline导致宽度无法撑满，最终出现按钮间多余间距、无法填满整列的问题。
原有代码存在的基础问题：

• 外层容器设置display: inline时，容器宽度由内容撑开，justify-content: space-around属性完全不生效
• 默认类自带的margin没有被覆盖
• 按钮项没有设置宽度分配规则，无法自动均分容器空间

不需要修改组件底层默认类配置，通过容器样式调整+局部类覆盖即可实现需求，代码如下：

模板部分调整 #

<!-- 移除原有inline样式，改用flex布局撑满宽度 -->
<div class="d-flex w-100">
  <b-form-group class="w-100">
    <b-form-radio-group
      id="radio-slots"
      v-model="formulaSign"
      :options="formulaSignOptions"
      buttons
      button-variant="outline-dark"
      :disabled="!editMode"
      class="w-100 d-flex radio-group-no-gap"
    >
    </b-form-radio-group>
  </b-form-group>
</div>

样式部分添加 #

/* 局部覆盖当前单选组的默认样式，避免影响其他组件 */
.radio-group-no-gap .form-check-inline {
  margin: 0; /* 去除默认inline类带来的左右间距 */
  flex: 1; /* 让每个按钮项均分容器宽度 */
}
.radio-group-no-gap .btn {
  width: 100%; /* 按钮本身撑满父项宽度 */
  border-radius: 0; /* 去除相邻按钮的重复圆角 */
}
/* 可选：给首尾按钮还原外圆角，视觉效果更自然 */
.radio-group-no-gap .form-check:first-child .btn {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.radio-group-no-gap .form-check:last-child .btn {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

如果不想写样式覆盖默认margin，可直接给b-form-radio-group绑定:inline="false"属性，组件将不再自动给子项添加form-check-inline类，再配合上述flex布局和宽度设置即可实现同等效果。

• 不建议全局修改form-check-inline的默认样式，会导致项目中其他使用该类的单选、复选组件样式错乱，使用自定义类做局部覆盖是最安全的方案
• 如果不需要按钮组的圆角适配，可直接删除首尾圆角的样式代码

内容的提问来源于stack exchange，提问作者Xinyi