html - 无法使注册表看起来更好

Question

我有一个具有以下布局的注册表单:

.col-lg-4.col-lg-offset-4

  .well
    %legend Create your account

    %form{role: :form, action: '/signup', method: :post}
      .row
        .form-group
          %label.col-xs-4{for: :email} Email
          .col-xs-8
            %input.form-control{id: :email, name: :email, type: :email, autocomplete: :off}
      .row
        .form-group
          %label.col-xs-4{for: :password} Password
          .col-xs-8
            %input.form-control{type: :password, name: :password, id: :password, autocomplete: :off}
      .row
        .form-group
          .col-xs-8.col-lg-offset-4
            %button.btn.btn-primary.btn-block{type: :submit} Create Account
.clearfix

但它看起来不太好(它们彼此太靠近 + 一些小问题)因为，很可能，我放置了 form-group、col-xs 和 row 顺序错误。不过，我尝试了不同的顺序，但结果或多或少是一样的。我在想，我做错了什么？

Answer 1

根据 Bootstrap docs , row 类唯一允许的第一个子类是 col- 类:

Content should be placed within columns, and only columns may be immediate children of rows.

尝试清理您的类作业，它应该以更正确的方式呈现。如果您要内联标签，try matching the horizontal form sample markup :

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