表单组中的 BootstrapVue 控制列数

Posted 2023-02-16

【中文标题】表单组中的 BootstrapVue 控制列数

【英文标题】：BootstrapVue control columns number in form group

【发布时间】：2019-06-08 07:39:42

【问题描述】：

我在 BootstrapVue 中有一个简单的表单组，其中包含几个输入字段和选择框，它们是在单击按钮时动态添加的，我需要在其右侧显示另一个元素（按钮、div 等），以便我可以将单击事件绑定到它以删除该字段。

这是我的代码（取自 BootstrapVue 页面）。

<b-card bg-variant="light">
    <b-form-group horizontal
                  label="Street:"
                  label-class="text-sm-right"
                  label-for="nestedStreet">
      <b-form-input id="nestedStreet"></b-form-input>
      <div>X</div> # This gets pushed down to the next line...I need it in-line
    </b-form-group>
    <b-form-group horizontal
                  label="City:"
                  label-class="text-sm-right"
                  label-for="nestedCity">
      <b-form-input id="nestedCity"></b-form-input>
    </b-form-group>
    <b-form-group horizontal
                  label="State:"
                  label-class="text-sm-right"
                  label-for="nestedState">
      <b-form-input id="nestedState"></b-form-input>
    </b-form-group>
    <b-form-group horizontal
                  label="Country:"
                  label-class="text-sm-right"
                  label-for="nestedCountry">
      <b-form-input id="nestedCountry"></b-form-input>
    </b-form-group>
</b-card>

我看到 BootstrapVue 自动将一个类 col-sm-9 添加到 form-group 中的每一行，这就是为什么，如果我在它之后添加另一个 div，它将被推到下一行，但我希望它出现排队。是否可以设置form-group行的列数？

【参考方案1】：

我发现使用常规 Bootstrap <div class="form-group"> 标签重写它可以让我自定义输入字段类，所以我使用 <div class="form-group"> 代替了 <b-form-group>。