Номер столбца управления BootstrapVue в группе форм

Question

У меня есть простая группа форм в BootstrapVue с парой полей ввода и ящиками выбора, которые добавляются динамически по нажатию кнопки, и мне нужно отобразить другой элемент (button, 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?

Answer 1

Я понял, что переписав его с помощью обычного тега Bootstrap <div class="form-group">, можно настроить класс поля ввода, поэтому вместо <b-form-group> я использовал <div class="form-group">.