复选框不适用于 AngularJS 中的 Bootstrap

Question

我有一个复选框，如果我把它放在 div 标签内，它就不会被选中

<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<label class="lbl" for="a">Fee</label>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<input type="checkbox" id="a" ng-model="x.y" >
</div>

而当我将它从 div 标签中移除时，它可以完美运行。

<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<label class="lbl" for="a">Fee</label>
</div>
<input type="checkbox" id="a" ng-model="x.y">

为什么会这样？ div 标签如何影响复选框的行为。 注意：我没有使用任何内联样式，也没有重载任何预定义的类。

我在从我的主页调用的部分视图中的手风琴（引导程序）中有这段代码（使用 ng-include 标记）。

编辑：我创建了我的代码的 JSFiddle，但它在 JSFiddle 中运行良好。从局部视图调用它会不会有问题？

JS链接：http://jsfiddle.net/gandhi_rahul/sk60mpwn/2/

Answer 1

引导复选框应该像这样设置

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