html - 将 Bootstrap 输入字段放在单独的列中时，它们的宽度不同

Question

我使用 Bootstrap 框架创建了一个在线招生表格。我在将两个输入字段放在不同的列中时遇到问题；这两个字段不会根据其他字段的宽度进行调整。这是我的表单代码以及这个问题的图像:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form method="post" action="">
                        <h3>Personal Information</h3>
                        <div class="form-group">
                            <span>Name</span>
                            <span><input type="username" class="form-control" id="userName"></span>
                        </div>
                        <div  class="form-group">
                            <span>Father Name</span>
                            <span><input type="username" class="form-control" id="userName"></span>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <span>Nationality</span>
                                <span><input type="username" class="form-control" id="userName"></span>
                            </div>
                            <div class="col-xs-6">
                                <span>Region</span>
                                <span><input type="username" class="form-control" id="userName"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <span>Date of Birth</span>
                                <span><input type="username" class="form-control" id="userName"></span>
                            </div>
                            <div class="col-xs-6">
                                <span>Place of Birth</span>
                                <span><input type="username" class="form-control" id="userName"></span>
                            </div>
                            <h3></h3>
                        </div>
                        <div  class="form-group">
                            <span>Permanent Home Address</span>
                            <span><input type="username" class="form-control" id="userName"></span>
                        </div>
                        <div  class="form-group">
                            <span>e-mail</span>
                            <span><input type="email" class="form-control" id="inputEmail3"></span>
                        </div>
                        <div>
                            <label class="fa-btn btn-1 btn-1e"><input type="submit" value="submit us"></label>
                        </div>
                    </form>

Answer 1

通过将 .form-horizo​​ntal 添加到表单(不必是 )，使用 Bootstrap 的预定义网格类在水平布局中对齐标签和表单控件组。这样做会将 .form-groups 更改为网格行，因此不需要 .row。 HTML

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>