bootstrap-vue - 带有复选框开关大小的 BootstrapVue 输入组

Question

我的模板中有以下内容:

<b-form-group
  v-for="(field, i) in fields"
  :key="field.id"
  :id="'field_' + field.id"
  :label="field.label"
  label-cols-sm="4"
  label-cols-lg="3"
  label-size="sm"
 >
   <b-input-group size="sm">
     <b-input-group-prepend is-text>
       <b-form-checkbox switch class="mr-n2"></b-form-checkbox>
     </b-input-group-prepend>
     <b-form-input v-model="fields[i].value"></b-form-input>
   </b-input-group>
</b-form-group>

该控件的渲染如下:

开关未以“sm”大小显示，因为正在添加 .customer-control 类:

有什么建议可以解决吗？我一直在查看文档，但似乎找不到我缺少的内容。

谢谢。

Answer 1

使用 Bootstrap v4.4 CSS 的输入组不正式支持自定义样式的检查/单选，但您可以使用实用程序类进行一些调整来对此进行调整(如 BootstrapVue 输入组文档中所述):

  <b-input-group size="sm">
    <b-input-group-prepend is-text>
      <b-form-checkbox switch class="mr-n2 mb-n1">
        <span class="sr-only">Switch for following text input</span>
      </b-form-checkbox>
    </b-input-group-prepend>
    <b-form-input aria-label="Text input with switch"></b-form-input>
  </b-input-group>

以上内容在自定义开关样式复选框上设置了负底部边距。