Twitter bootstrap 引导3上的复选框在响应布局中显示不正确

我一直在使用创建带有图像的复选框。当我直接使用代码示例时，按钮没有复选框。但当我把它们放在一个响应性布局中时，它们有一个复选框

我创造了一个能证明这一点的模型。有没有一种方法可以让引导按钮本身不带复选框

代码如下：

<div class="container-fluid">
  <div class="row">
  <div class="btn-group" data-toggle="buttons">
    <div class="col-md-4">
      <label class="btn btn-primary">
        <input autocomplete="off" type="checkbox">
          Checkbox 1
      </label>
    </div>
    <div class="col-md-4">
      <label class="btn btn-primary">
        <input autocomplete="off" type="checkbox">
          Checkbox 2
      </label>
    </div>
    <div class="col-md-4">
      <label class="btn btn-primary">
        <input autocomplete="off" type="checkbox">
          Checkbox 3
      </label>
    </div>
  </div>
</div>

复选框1
复选框2
复选框3

您的标记有点不正确--应该是这样的：

<div class="container-fluid">
  <div class="row">

    <div class="col-md-4">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off"> Checkbox 1
        </label>
      </div>
    </div>

    <div class="col-md-4">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off"> Checkbox 2
        </label>
      </div>
    </div>

    <div class="col-md-4">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off"> Checkbox 3
        </label>
      </div>
    </div>

  </div>
</div>

复选框1
复选框2
复选框3

看

除了结构之外，代码中需要注意的几个错误：

---

您有：

，“.”不应该出现在

.col-md-4

中，而且需要删除输入关闭标记（

），输入是自动关闭的

，我将很快测试新代码，谢谢！多亏了这些打字错误，我用了一个在线转换器将haml转换成html，这一定把类名搞乱了。我已经修正了拼写错误，以防人们期待未来。