引导程序并排字段对齐缺失标签的问题

Question

我正在尝试创建一个简单的

bootstrap

布局，但在对齐没有标签的控件时遇到问题。

我的问题在下面的小提琴中复制。第三列上的控件（文本框和按钮）没有标签，因此这些控件未与“姓氏”文本框旁边对齐。我也尝试过使用

mt-2

类以及

align-bottom

但没有成功。有人可以帮忙吗？

小提琴

html 如下。

<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 mt-5 align-baseline">   
        <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 mb-0 align-baseline">   
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
    
</div>

下面的红线显示了对齐问题。第三列上的控件应与姓氏文本框对齐。

谢谢你

Answer 1

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<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 align-items-end">
    <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 mb-0 d-flex align-items-end">
    <input type="submit" value="Submit" class="btn btn-primary" />
  </div>

</div>