Bootstrap 4 如何实现链接与form-group内input控件垂直对齐

优化方案 #

Bootstrap 4 原生提供了更稳定的自适应对齐方案，完全不需要手动写固定外边距调整位置，推荐以下两种实现：

方案1：占位标签对齐（扩展性最优） #

利用和左侧表单一致的标签结构做透明占位，保证两侧布局逻辑完全统一，后续如果右侧需要新增标签直接删除invisible类即可，适配所有响应式场景：

<div class="row">
    <div class="col-4 form-group">
        <label for="theHours"><b>Hours</b></label>
        <input class="form-control" type="text" id="theHours" aria-describedby="hoursHelp">
    </div>
    <div class="col-4 form-group d-flex flex-column">
        <!-- 透明占位标签，高度和左侧标签完全一致 -->
        <label class="invisible">&nbsp;</label>
        <a href="javascript:void()">issue</a>
    </div>
</div>

方案2：行底部对齐（代码最简洁） #

如果确定右侧不需要加标签，直接给行容器加align-items-end类让两列内容底部对齐即可，无冗余元素：

<div class="row align-items-end">
    <div class="col-4 form-group">
        <label for="theHours"><b>Hours</b></label>
        <input class="form-control" type="text" id="theHours" aria-describedby="hoursHelp">
    </div>
    <div class="col-4">
        <a href="javascript:void()">issue</a>
    </div>
</div>

原写法缺陷说明 #

你原来的实现靠mb-4固定外边距调整位置，属于硬编码的固定偏移，后续如果修改了标签字体大小、行高，或者页面缩放、响应式布局变化时，对齐效果会直接失效，上述两种方案都是基于Bootstrap原生布局规则实现的自适应对齐，维护成本更低。

内容的提问来源于stack exchange，提问作者dhkom