Question

我试图使用“＃34;”复选框＆＃34;下的引导页面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中的按钮一样。

Answer 1

在您的JSFIDDLE中，您正在使用Bootstrap v2.0.4 .. Boostrap doc站点使用较新的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

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

Bootstrap复选框按钮无法正确显示

2 个答案: