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>

控件呈现如下：

由于正在添加 .customer-control 类，因此开关未显示为“sm”大小：

关于如何解决的任何建议？我一直在查看文档，但似乎找不到我所缺少的。

谢谢。

标签： bootstrap-vue

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>

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