引导复选框按钮未正确显示答案

【问题标题】：Bootstrap checkbox buttons not displaying correctly引导复选框按钮未正确显示
【发布时间】：2014-05-13 17:10:55
【问题描述】：

我正在尝试使用引导页面here“复选框”小节下描述的复选框按钮功能。我将该页面中的 html（如下所示）复制粘贴到 jsfiddle 中，复选框突然出现在按钮内。我怎样才能摆脱它们？我在 Bootstrap 网站或使用 Google 时找不到任何提及此问题的内容。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox">Option 1</label>
    <label class="btn btn-primary">
        <input type="checkbox">Option 2</label>
    <label class="btn btn-primary">
        <input type="checkbox">Option 3</label>
</div>

编辑：我发现在输入复选框元素上调用 .hide() 会隐藏复选框，然后复选框看起来就像 Bootstrap 3 中的按钮。

【问题讨论】：

当您使用btn btn-primary 时，您期望什么？
您使用了错误的引导程序版本。
我希望它看起来像在引导站点上的样子，一个普通的蓝色按钮，中间没有白色复选框。
@CalumMcCall 当前的引导站点显示引导程序 3+ 的文档，但是您小提琴上的引导程序文件是引导程序 2.0.4（至少是 CSS）所以如果您还使用引导程序 2.0.4 ，它不起作用，您需要更改引导版本或查看引导 v2 文档：getbootstrap.com/2.3.2/javascript.html#buttons
嗯，好的。非常感谢！我刚刚使用最新版本的引导程序在 js fiddle 中工作

标签： html css twitter-bootstrap

【解决方案1】：

在您的 JSFIDDLE 中，您使用的是 Bootstrap v2.0.4 .. Boostrap 文档站点使用较新的 Bootstrap v3.1.1

检查你在开发环境中加载了哪个版本

对于 Boostrap 2.x.x，您需要这样做

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

http://getbootstrap.com/2.3.2/javascript.html#buttons

【讨论】：

【解决方案2】：

试试这个代码的复选框：

<div>
  <label class="col-md-4">
    <input type="checkbox"> Option 1
  </label>
  <label class="col-md-4">
    <input type="checkbox"> Option 2
  </label>
  <label class="col-md-4">
    <input type="checkbox"> Option 3
  </label>
</div>

在http://jsfiddle.net/g3mu8/307/完成。

这里有和按钮：

<div class="btn-group">
  <button type="button" class="btn btn-primary" data-toggle="button">option1</button>
  <button type="button" class="btn btn-primary" data-toggle="button">option2</button>
  <button type="button" class="btn btn-primary" data-toggle="button">option3</button>
</div>

在这里完成http://jsfiddle.net/g3mu8/308/

【讨论】：