Twitter Bootstrap 3 form-horizo​​ntal与侧边栏碰撞

Question

我想要一个使用bootstrap的水平表单，但第二个输入太宽，所以它在侧边栏下面。为什么呢？

http://jsfiddle.net/58szw1w2/

标记：

<div id="sidebar">Sidebar</div>
<div id="content">
    Form from the <a href="http://getbootstrap.com/css/#forms-horizontal">example</a>
    <form class="form-horizontal" role="form">
      <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>
</div>

相关的CSS：

#content {
    width: 67%;
}

#sidebar {
    float: right;
    width: 33%;
    height: 200px;
    background-color: gold;
}

Answer 1

你需要让#content div浮动到左边，让一切工作都能看到 JSFiddle

#content {
    width: 67%;
    float: left;
    padding-right: 10px;
}