引导两列对齐

Question

我试图让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>

我希望最终的结果是让最后四个与前一个很好地对齐。

Answer 1

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

你必须确保在每个断点>发生。

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

为了确保最小屏幕上的手机和性别之间存在一定的差距（当它们叠加时），我将mb-3类（边缘底部3个单位）添加到电话列。

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <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-2 col-sm-3 col-form-label text-sm-right mb-3">Phone</label>
        <div class="col-10 col-sm-3">
            <input id="inputText3" type="text" class="form-control">
        </div>
        <label for="inputText3" class="col-2 col-sm-2 col-lg-1 col-form-label text-sm-right">Gender</label>
        <div class="col-10 col-sm-3 col-lg-2">
            <select class="form-control">
                <option value="Male" selected>Male</option>
                <option value="Female">Female</option>
            </select>
        </div>
    </div>
</div>