Bootstrap 3 上的复选框在响应式布局中显示不正确

Question

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

我创建了 a JSFiddle 来证明这一点。有没有办法让 Bootstrap 按钮没有复选框本身？

代码如下：

<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>

Answer 1

您的标记有点偏离——应该是这样的：

<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>

见this demo bootply

您的代码中有一些结构以外的错误需要注意：

你有这个：<div class=".col-md-4">，'.' .col-md-4 中不应存在，此外，需要删除输入结束标记 (</input>)——输入是自闭的

Bootstrap 3 上的复选框在响应式布局中显示不正确

checkbox on Bootstrap 3 shows up incorrectly in responsive layout

checkbox

twitter-bootstrap

twitter-bootstrap-3