Центрирование флажка по вертикали с другими компонентами ввода с помощью начальной загрузки

Question

Я пытаюсь центрировать компонент-флажок, стилизованный под BootStrap, и мне пока не повезло.Я попытался с помощью mt указать разные размеры полей, чтобы центрировать его с помощью ввода текста, но ни одно из значений не решает проблему.

Вот как далеко я зашёл:

У меня есть одна строка формы, стилизованная под класс «форма-строка», и две группы форм внутри нее, чтобы сгруппировать метки с соответствующими элементами управления.Похоже, что по умолчанию элемент управления флажок находится на той же высоте, что и метка для элемента управления вводом (например), когда они находятся в группе форм.

Это соответствующий фрагмент кода:

<div class="form-row col-sm-12">
              <div class="form-group col-sm-3">
                <label for="cuota">Cuota en litros</label>
                <input id="cuota" class="form-control" type="number" v-model.number="nuevaRuta.cuotaLitros">                
              </div>
              <div class="form-group col-sm-3 mt-5">                
                <input type="checkbox" class="custom-control-input" v-model="nuevaRuta.activa" id="activa"/>                
                <label for="activa" class="mr-8 custom-control-label">Habilitar esta ruta</label>                           
              </div>
</div>

Самое близкое, что я могу найти, это поместить его в нижнюю базовую линию других элементов управления, которые находятся в той же строке.Я бы хотел, чтобы оно было посередине.Кто-нибудь знает, как мне этого добиться?

Answer 1

Вы можете просто align-items-center добавить к form-row ...

<div class="form-row align-items-center">
        <div class="col-sm-3">
            <label for="cuota">Cuota en litros</label>
            <input id="cuota" class="form-control" type="number" v-model.number="nuevaRuta.cuotaLitros">
        </div>
        <div class="col-sm-3">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck1">
                <label class="custom-control-label" for="customCheck1">Habilitar esta ruta</label>
            </div>
        </div>
    </div>

https://www.codeply.com/go/ZHmuMcBd1A

Answer 2

Просто сгруппируйте свои входные данные в Flex div вместо row и добавьте align-items-center , а также добавьте некоторый класс полей в форму -check :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="d-flex align-items-center">
  <div class="form-group">
    <label for="cuota">Cuota en litros</label>
    <input id="cuota" class="form-control" type="number" v-model.number="nuevaRuta.cuotaLitros">                
   </div>          
   <div class="form-check mt-3 ml-3">                
    <input type="checkbox" class="custom-control-input" v-model="nuevaRuta.activa" id="activa"/>                
    <label for="activa" class="custom-control-label">Habilitar esta ruta</label>                           
   </div>
</div>