Twitter Bootstrap 水平表单元素在一行上答案

【问题标题】：Twitter Bootstrap horizontal form elements on a lineTwitter Bootstrap 水平表单元素在一行上
【发布时间】：2015-06-08 01:50:38
【问题描述】：

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

  <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>

我有这个表格：

但我想要这个：

如果有人能帮助我实现我想要的，那就太好了。

【问题讨论】：

你能发一个工作的Jsfiddle
忘掉小提琴吧！我什至无法从你的屏幕截图中看出你想要什么。您能否添加一个声明，说明哪里出了问题？ PS：Fiddles 或 Plunkers 也总是很好:)
我想要street/Nr的输入文本在同一行的底部图像的形式

标签： html forms twitter-bootstrap

【解决方案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>

【讨论】：