我有一个注册表格,其中包含以下布局:
.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
置于错误的顺序。不过,我尝试了不同的顺序,但结果大致相同。我想知道,我做错了什么?
答案 0 :(得分:1)
根据Bootstrap docs,row
类中唯一允许的第一个孩子是col-
类:
内容应放在列中,并且只能列 行的直接孩子。
尝试清理课堂作业,并以更正确的方式呈现。如果您要使用内嵌标签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>