带有复选框开关大小的 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 class：

关于如何解决有什么建议吗？我一直在查看文档，但似乎找不到我遗漏的内容。

谢谢。

Answer 1

使用 Bootstrap v4.4 CSS 的输入组未正式支持自定义样式 checks/radios，但您可以使用实用程序类进行一些调整以为此进行调整（如 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>

以上设置了自定义开关样式复选框的负下边距。

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

BootstrapVue input-group with checkbox switch size

bootstrap-vue