Twitter Bootstrap水平表单元素在一条线上

Question

我希望我的一些元素在一条线上是水平的，但我的引导技能还不够。

  <div class="tab-pane fade" id="create">
    <div class="modal-header">
        <h1 class="text-center" id="login-tit">Register</h1>
    </div>
    <form id="tab">
        <div class="form-group">
            <label class="reg-form-left">First Name</label>
            <input type="text" class="form-control" >
        </div><br />
        <div class="form-group" style="margin-top:-22px;">
          <label class="reg-form-left">Last Name</label>
          <input type="text" value="" class="form-control">
        </div>
        <div class="form-group">
          <label class="reg-form-left">Email</label>
          <input type="text" value="" class="form-control">
        </div>
        <div class="form-group">
          <label class="reg-form-left">Password</label>
          <input type="text" value="" placeholder="6 - 20 characters" class="form-control">
        </div>
        <div class="form-group">
          <label class="reg-form-left">Password again</label>
          <input type="text" value="" class="form-control">
        </div>
        <div class="control-group">
          <label class="reg-form-left control-label">Street/Nr</label>
          <div class="controls-row">
            <div class="controls col-sm-8">
              <input type="text" value="" class="form-control">
            </div>
            <div class="controls col-sm-1">
              <p style="font-size:24px;">/</p>
            </div>
            <div class="controls col-sm-3">
              <input type="text" value="" class="form-control">
            </div>
          </div>
        </div>
        <div class="form-group col-xs-5">
          <label class="reg-form-left">Postal code/City</label>
          <input type="text" value="" class="form-control">
        </div>
        <div class="form-group col-xs-6">
           <input type="text" value="" class="form-control">
        </div>
        <div class="register-btn">
          <button class="btn btn-primary">Create Account</button>
        </div>
      </form>
    </div>

我有这样的表格：

但我想要这个：

如果有人能帮助我实现我想要的目标，那将是非常好的。

Answer 1

你需要先了解一些事情 -

• 每次使用浮点数或类似的CSS定位时，它都会影响以下元素，因为现在没有定义新元素的位置。
• 当您使用col-*属性时，它会向元素添加默认填充。对于对齐，您需要先将您的内容包装在row中以避免此问题。

此处修复了代码的最后几行

<div class="control-group">
  <label class="reg-form-left control-label">Street/Nr</label>
  <div class="controls-row">
    <div class="row">
      <div class="controls col-sm-8">
        <input type="text" value="" class="form-control">
      </div>
      <div class="controls col-sm-1">
        <p style="font-size:24px;">/</p>
      </div>
      <div class="controls col-sm-3">
        <input type="text" value="" class="form-control">
      </div>
    </div>
  </div>
</div>
<div class="form-control">
  <div class="row">
    <div class="form-group col-xs-5">
      <label class="reg-form-left">Postal code/City</label>
      <input type="text" value="" class="form-control">
    </div>
    <div class="form-group col-xs-6">
       <input type="text" value="" class="form-control">
    </div>
    <div class="register-btn">
      <button class="btn btn-primary">Create Account</button>
    </div>
  </div>
</div>