Question

我正在尝试将具有BootStrap样式的复选框组件居中放置，到目前为止，我还没有碰到任何运气。我尝试使用mt指定不同的页边距大小，以使其以文本输入为中心，但是没有一个值可以解决问题。

这是我走了多远：

我有一个表单行，其样式为“ form-row”类，并且其中包含两个表单组，以使用各自的控件对标签进行分组。看起来，默认情况下，复选框控件在表单组中时，其高度与输入控件的标签高度相同（例如）。

这是相关的代码段：

<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

只需将输入分组到 Flex div中，而不是 row ，然后添加 align-items-center ，并为< strong>形式检查：

<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>

Answer 2

您只需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

使用引导程序将复选框与其他输入组件垂直居中

2 个答案: