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

【问题标题】：Centering a Checkbox vertically with other input components with bootstrap使用引导程序将复选框与其他输入组件垂直居中
【发布时间】：2018-10-19 00:41:02
【问题描述】：

我正在尝试将使用 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>

我能做到的最接近的是将它放在同一行中其他控件的底部基线。我希望它在中间。有谁知道我如何做到这一点？

【问题讨论】：

标签： html twitter-bootstrap checkbox bootstrap-4

【解决方案1】：

只需将您的输入分组到 Flex div 而不是 row 并添加 align-items-center 并将一些边距类添加到您的表单检查：

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

【讨论】：

您的解决方案有效。我对您的代码进行了一些修改，使其文本输入的大小与我在表单上的其他输入相同，但大小有点偏离。此外，当我水平调整浏览器大小时，复选框的标签会换行到下一行，即使有足够的文本空间也是如此。你知道这是为什么吗？谢谢你的帮助，顺便说一句。您能否解释一下为什么您的解决方案有效？我不太明白为什么复选框会这样。
我为此修改了复选框 div 的代码：
。现在输入文本与表单中的其他文本大小相同。不需要使用 d-flex，因为我在整个表单的 div 中使用了容器（我想这就是我不需要使用 d-flex 的原因）
@Greg 太好了！！很好的解决方案！是的，不需要使用 d-flex 因为 bootstrap grid 基于 flexbox 只会添加 align-self-center 它将居中！关于您的问题，如果您想管理您的子内容，只需将父级设置为 flex，您将很容易使用！

【解决方案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

【讨论】：

您的代码无效。我想要整个复选框，其标签位于文本输入的中间基线，位于其左侧。