Как выровнять метку с переключателем на той же строке в Bootstrap Vue

Я хочу, чтобы метка была встроена в его переключатели:

<b-form-group label="Zobrazit">
  <b-form-radio-group id="radio-group-2" v-model="absoluteValues" name="radio-sub-component">
    <b-form-radio value="true">Hodnoty</b-form-radio>
    <b-form-radio value="false">Procenta</b-form-radio>
  </b-form-radio-group>
</b-form-group>

Выглядит это так:

введите здесь описание изображения

Я не могу найти какой-либо соответствующий атрибут в элементе FormGroup. Label-align выравнивает текст, но не объединяет обе строки.

Обновлять:

label-col=1 помещает все в одну строку, но радиостанции не выровнены по вертикали: введите описание изображения здесь


vue.js bootstrap-vue
person Leos Literak    schedule 03.05.2020    source источник
comment
Вы пробовали label-col bootstrap-vue.netlify.app/docs/components? / form-group?   -  person Chellappan வ    schedule 03.05.2020
comment
Спасибо, это близко. См. Обновленный вопрос.   -  person Leos Literak    schedule 03.05.2020

Ответы (1)


arrow_upward
3
arrow_downward

Примените служебный класс pt-2 Bootstrap padding к компоненту b-form-radio-group, чтобы все это было в одной строке

Попробуйте это:

 <b-form-group label-cols-sm="1" label="Zobrazit">
  <b-form-radio-group class="pt-2" id="radio-group-2" v-model="absoluteValues" 
    name="radio-sub-component">
    <b-form-radio value="true">Hodnoty</b-form-radio>
    <b-form-radio value="false">Procenta</b-form-radio>
  </b-form-radio-group>
</b-form-group>
person Chellappan வ    schedule 03.05.2020
comment
Спасибо за помощь - person Leos Literak; 03.05.2020