Question

我正在尝试O'Reilly一书中的以下三个例子 Bootstrap by Jake Spurlock。当我将代码粘贴到JSFiddle时它突出显示红色错误，大概是因为嵌入了一个复选框 label元素中的input元素不会生成有效的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问题。

那么在bootstrap中为表单设置样式的正确方法是什么，以便html 是有效的，以便浏览器正确显示紧随其后的复选框通过单行复选框文本本身？我更喜欢答案这不需要创建任何自定义CSS。

Answer 1

对于标签的类应为control-label，复选框无效

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

Twitter Bootstrap：使用复选框标签对齐复选框的正确方法

1 个答案: