Bootstrap无标签控件与带标签字段的并排对齐问题

问题核心是前两列的输入框上方有标签占据垂直空间，第三列无标签的控件默认从容器顶部开始排列，导致垂直位置和前两列输入框不一致。以下两种方法可以解决：

方法1：利用Flex布局实现底部对齐 #

给第三列容器添加Flex布局类，让控件自动对齐到容器底部：

<div class="row">
    <div class="col-xs-4 col-lg-4">
        <label for="firstNameInput" class="control-label">First Name</label>
        <input type="text" id="firstNameInput" class="form-control" />
    </div>
    <div class="col-xs-6 col-lg-5">
        <label for="lastNameInput" class="control-label">Last Name</label>
        <input type="text" id="lastNameInput" class="form-control" />
    </div>
    <div class="col-xs-2 col-lg-1 d-flex flex-column h-100">   
        <input type="text" class="form-control mt-auto" />
    </div>
</div>
<div class="row">
    <div class="col-xs-4 col-lg-4">
        <label for="firstNameInput" class="control-label">First Name</label>
        <input type="text" id="firstNameInput" class="form-control" />
    </div>
    <div class="col-xs-6 col-lg-5">
        <label for="lastNameInput" class="control-label">Last Name</label>
        <input type="text" id="lastNameInput" class="form-control" />
    </div>
    <div class="col-xs-2 col-lg-1 d-flex flex-column h-100">   
        <input type="submit" value="Submit" class="btn btn-primary mt-auto" />
    </div>
</div>

• d-flex flex-column：将第三列容器设置为垂直方向的Flex布局
• h-100：让容器高度和同行其他列保持一致
• mt-auto：给控件添加自动顶部margin，使其对齐到容器底部

方法2：添加隐藏标签保持布局一致性 #

给第三列添加视觉隐藏的标签，让布局结构和前两列统一，控件自然对齐：

<div class="row">
    <div class="col-xs-4 col-lg-4">
        <label for="firstNameInput" class="control-label">First Name</label>
        <input type="text" id="firstNameInput" class="form-control" />
    </div>
    <div class="col-xs-6 col-lg-5">
        <label for="lastNameInput" class="control-label">Last Name</label>
        <input type="text" id="lastNameInput" class="form-control" />
    </div>
    <div class="col-xs-2 col-lg-1">   
        <label class="control-label visually-hidden">Hidden Label</label>
        <input type="text" class="form-control" />
    </div>
</div>
<div class="row">
    <div class="col-xs-4 col-lg-4">
        <label for="firstNameInput" class="control-label">First Name</label>
        <input type="text" id="firstNameInput" class="form-control" />
    </div>
    <div class="col-xs-6 col-lg-5">
        <label for="lastNameInput" class="control-label">Last Name</label>
        <input type="text" id="lastNameInput" class="form-control" />
    </div>
    <div class="col-xs-2 col-lg-1">   
        <label class="control-label visually-hidden">Hidden Label</label>
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</div>

• visually-hidden（Bootstrap 5）或sr-only（Bootstrap 4）：隐藏标签但保留语义化，不影响视觉布局

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