Question

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

这是我的代码（摘自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行中的列数？

Answer 1

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

表单组中的BootstrapVue控制列号

1 个答案: