Question

我正在将我的代码库从Bootstrap 2迁移到Bootstrap 3.我有一组btn-groups，它们在BS2中工作正常，但很难让它与BS3一起工作。
单击时按钮保持活动状态，除非再次单击，否则不切换。这是代码：

<div class="btn-group" data-toggle="buttons">
    <button type="button" id="btnc-1" class="btn btn-default active">Gifts</button>
    <button type="button" id="btnc-2" class="btn btn-default">Apparels</button>   
    <button type="button" id="btnc-3" class="btn btn-default">Perfumes</button> 
</div>

Evne BS页面推荐了类似的语法，所以我感觉不到或者说我看不出语法有任何问题。我在SO上尝试了其他类似的问题，这个问题最接近Bootstrap btn-group doesn't change radio buttons，但找不到任何可行的解决方案。我已经处理了那里提到的建议。

任何帮助/指针都将受到高度赞赏。

Answer 1

你不需要在bootstrap 3中添加data-toggle html属性.btn组通过设置焦点在按钮上自动添加活动状态。如果我没有弄错的话，.btn:focus上的psued类使它看起来像活动而不是添加活动类。它也更有意义，因为它可以访问。

<div class="btn-group" >
<button type="button" id="btnc-1" class="btn btn-default">Gifts</button>
<button type="button" id="btnc-2" class="btn btn-default">Apparels</button>   
<button type="button" id="btnc-3" class="btn btn-default">Perfumes</button> 
 </div>

http://www.bootply.com/ICiufEep2f#

如果你必须有活动类然后添加它，然后使用下面的js通过@Serlite

$(".btn-group > .btn").click(function(){
$(".btn-group > .btn").removeClass("active");
$(this).addClass("active");
});

this was discussed on bootstrap 3 as well

Answer 2

查看Bootstrap文档（在JavaScript下），有一个部分用于将按钮用作单选按钮：

单选

将data-toggle="buttons"添加到一组无线电输入，以便在btn-group上切换无线电样式。

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> Option 1 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Option 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3"> Option 3 </label> </div>

来源： http://getbootstrap.com/javascript/#buttons

不幸的是，您将无法再为每个按钮使用button标记，因为我无法指出该按钮类型为＆＃34; radio＆＃ 34。

你也可以使用一些JavaScript删除＆＃34; active＆＃34;单击它们时其他按钮的状态，但此处的代码块（以及http://getbootstrap.com）将确保按钮被视为一组单选按钮。

JSFiddle： http://jsfiddle.net/52VtD/6314/

从Bootstrap 2迁移到Bootstrap 3会导致btn-group切换问题

2 个答案: