如何调整Bootstrap Vue表单单选按钮宽度至50%？

要让<b-form-radio-group>中的两个单选按钮各占50%宽度，无需自定义CSS，可通过Bootstrap-vue组件的内置属性结合Bootstrap flex类实现，调整后的代码如下：

<b-row>
  <b-col cols="12" class="text-center">
    <b-form-group class="w-100">
      <b-form-radio-group
        button-variant="outline-primary"
        buttons
        class="d-flex flex-wrap w-100"
        button-class="flex-fill"
      >
        <b-form-radio value="option1">选项1</b-form-radio>
        <b-form-radio value="option2">选项2</b-form-radio>
      </b-form-radio-group>
    </b-form-group>
  </b-col>
</b-row>

关键调整说明： #

• class="d-flex flex-wrap w-100"：给单选组容器设置flex布局，允许子项换行，同时强制容器占满父元素宽度，为按钮平分空间提供基础。
• button-class="flex-fill"：通过组件的button-class属性，给每个单选按钮的按钮元素添加flex-fill类，该类会让flex子项自动平分可用空间，两个按钮自然各占50%宽度。
• 移除<b-col>的sm="auto"属性，改用cols="12"确保列占满整行，避免列宽度限制导致按钮无法展开。

原代码未生效的原因：<b-form-radio-group>在buttons模式下的内部结构会包裹按钮，直接给组添加flex类无法直接作用到按钮层级，而通过button-class能精准给按钮设置样式类，配合容器的flex布局即可达到目标效果。

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