Bootstrap 3：为什么在标签内嵌套输入？

Question

我即将为Bootstrap 3设置一些复选框，我绝对无法理解为什么in their examples他们使用此标记：

<label>
  <input type="checkbox"> Check me out
</label>

而不是：

<input type="checkbox" id="a"><label for="a">Check me out</label>

我很想知道为什么他们采用嵌套方法。我看不到任何好处。巨大的缺点是，检查/未检查状态无法使用CSS进行样式设置，例如：

input:checked + label { }

Answer 1

答案是用户体验。将radio或checkbox输入嵌套在<label>中可提供其他功能。考虑：

<label>
    <input type="checkbox" value="">
    This is my Checkbox Option inside a Label
</label>

在上面的代码中，通过单击框本身或<label>中的文本来选中复选框。

在以下代码中，<label>文字无法点击。选择复选框的唯一方法是直接单击该框。

<input type="checkbox" value="">
<label>This is my Checkbox Option outside a Label</label>