让单选按钮组全宽BootstrapVue

Question

我想让我的单选按钮组的宽度与它的父组一样大。我试过将宽度设置为100%，这在大屏幕上是可行的，但在手机上会导致我的单选按钮组比屏幕大.我还想问如何能够改变组的背景颜色。

       <b-form-row>
            <b-col>
                    <b-form-radio-group
                            class="w-100"
                            id="radioButtonGroup"
                            v-model="selected"
                            :options="freeSeats"
                            buttons
                            button-variant="primary"
                            size="lg"
                            name="radio-btn-outline"
                    ></b-form-radio-group>
            </b-col>
        </b-form-row>

Answer 1

试试Bootstrap v4 flex实用类。

<b-form-radio-group
  class="d-flex flex-wrap"
  id="radioButtonGroup"
  v-model="selected"
  :options="freeSeats"
  buttons
  button-variant="primary"
  size="lg"
  name="radio-btn-outline"
></b-form-radio-group>

类 d-flex 将单选组切换为全宽（而不是默认的inline-flex）。列表中的 flex-wrap 类是可选的，用于在单行上显示更多按钮时，将单选按钮包到下一行。