Twitter Bootstrap：将复选框与复选框标签对齐的正确方法

Question

我正在尝试 O'Reilly 书中的以下三个示例 Bootstrap by Jake Spurlock。当我将代码粘贴到JSFiddle 它以红色突出显示错误，大概是因为嵌入了一个复选框 标签元素内的输入元素不会生成有效的 HTML。

<!-- First example from book's Bootstrap CSS -> Forms section: -->
<form>
  <fieldset>
    <legend>Legend</legend>
    <label for="name">Label name</label>
    <input type="text" id="name" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox" for="checkbox">
      <input type="checkbox" id="checkbox">
      Check me out
    </label>
    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>

<!-- Second example from book's Bootstrap CSS -> Forms section: -->
<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox">
    Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>

<!-- Third example from book's Bootstrap CSS -> Forms section: -->
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox">
        Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

特别是在所有三种情况下，导致 HTML 错误的代码如下：

      <label class="checkbox">
        <input type="checkbox">
        Remember me
      </label>

下面的related post 似乎处理了同样的问题 但答案中的代码似乎无法解决我描述的 HTML 问题。

那么在引导程序中设置表单样式的正确方法是什么？ 是有效的，以便浏览器正确显示后面的复选框 通过单独一行上的复选框文本？我更喜欢一个答案 不需要创建任何自定义 CSS。

Answer 1

标签的类应该是控制标签，复选框无效

<div>
  <label class="control-label">
    <input type="checkbox">
    Remember me
  </label>
</div>
<button type="submit" class="btn">Submit</button>