将它们放在单独的列中时，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

使用Bootstrap的预定义网格类，通过在表单中​​添加.form-horizo​​ntal（它不必是a），在水平布局中对齐表单控件的标签和组。这样做会改变.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>

Answer 2

要正确使用boostrap表单网格系统，您只需要在.col-xs-12类中扭曲前两个输入的内容。

像这样：

<div class="form-group">
    <div class="col-xs-12">
        <span>Name</span>
        <span><input type="username" class="form-control" id="userName">     

        </span>
    </div>
</div>

Answer 3

col-xs-6正在添加填充。您可以将您的论坛包装在col-xs-12中，或将col-xs-12添加到每个应为全宽的表单组。

这是我的傻瓜 Working demo

Answer 4

将表单组换成<div class="row"></div>。这将删除col-xs-6类添加的填充。