Question

如何将复选框与输入对齐，而不向其添加标签？在这种情况下，相关的方法/最佳做法是什么？

以下是一个示例：http://codepen.io/rotavio/pen/GjwLEO

<form class="container">
    <div class="row">
        <div class="form-group col-md-4">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group col-md-4">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="checkbox col-md-4">
            <label>
                <input type="checkbox"> Remember Me
            </label>
        </div>
    </div>
</form>

Answer 1

我的建议只是将复选框包装在div中，否则可以强制复选框对齐但是“记住我”不是引用。我也会删除标签内的输入，因为这不正确，并且与上面的内容不一致。

<form class="container">
<div class="row">
<div class="form-group col-md-4">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group col-md-4">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox col-md-4">
  <label>&nbsp;</label>
  <div><input type="checkbox">Remember Me</div>
</div>
</div>
</form>

在Bootstrap 3中对齐没有标签的表单元素

1 个答案: