表单组中的BootstrapVue控件列数

Question

我在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会自动地向form-group中的每一行添加一个类col-sm-9，这就是为什么，如果我在它后面添加另一个div，它会被下推到下一行，但我希望它出现在内联中。是否可以设置form-group行中的列数？

Answer 1

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