Bootstrap 4 引导两列对齐

我试着让4列与一种形式的两列对齐，但就我的一生而言，我看不出我做错了什么

代码如下：

            <div class="form-group row">
              <label for="inputText3" class="col-6 col-sm-3 col-form-label text-sm-right">Address</label>
              <div class="col-12 col-sm-8 col-lg-6">
                <input id="inputText3" type="text" class="form-control">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputText3" class="col-6 col-sm-3 col-form-label text-sm-right">Phone</label>
              <div class="col-3 col-sm-3">
                <input id="inputText3" type="text" class="form-control">
              </div>
              <label for="inputText3" class="col-1 col-sm-1 col-form-label text-sm-right">Gender</label>
              <div class="col-3 col-sm-3 col-lg-3">
                <select class="form-control">
                  <option value="Male" selected>Male</option>
                  <option value="Female">Female</option>
                </select>
              </div>
          </div>

地址
电话
性别
男性
女性

我希望最终的结果是底部的四个与顶部的一个很好地对齐

---

要使4个表单元素与它们前面的2个表单元素正确对齐，您只需确保4个元素使用的列单位之和等于它们前面的2个表单元素使用的列单位之和

您必须确保在每个断点处都发生这种情况

最好通过查看下面代码段中的列类来解释这一点

为了确保在最小的屏幕上（当它们堆叠起来时），phone和gender之间有一定的余量，我在phone列中添加了

mb-3

类（余量底部3个单位）

单击下面的“运行代码段”并展开到测试的完整页面：

地址
电话
性别
男性
女性

您希望您的“男性”选择器位于性别标签所在的位置？您有其他CSS吗？