Bootstrap 3按钮组
Bootstrap 3按钮组
提问于 2013-10-08 19:10:38
**自举3
我试图使每一组按钮组都是唯一的，但不同的组相互干扰
<label>Payment Mode</label>
<div class="btn-group">
<button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
<button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
</div>
<label>Payment Period</label>
<div class="btn-group">
<button type="button" class="btn btn-default">Immediate</button>
<button type="button" class="btn btn-default"> More Than 1 day</button>
</div>
我如何保持它在自己的组中的唯一性
回答 3
Stack Overflow用户
发布于 2013-10-09 00:55:47
单击btn-group doesn't set a (active) class中的按钮。该按钮获得不同的背景颜色，因为它是聚焦的(：焦点)。单击不同btn组中的按钮会将焦点设置到此按钮。
使用类似下面的代码为每个btn组设置一个活动类：
$('.btn-group button').click(function()
{
$(this).parent().children().removeClass('active');
$(this).addClass('active');
});Stack Overflow用户
发布于 2014-09-26 22:01:33
如果你使用的是AngularJS，Angular UI bootstrap有一个很好的解决方案。
基本上可以使用btnRadio指令执行以下操作。
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>Stack Overflow用户
发布于 2016-02-16 05:24:01
为了简化它，以便下一位查看的人，这里有Bootstrap网站上的解决方案代码：
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>基本上，您将标签样式设置为按钮，并将选项编码为常规单选按钮，以将一组选项与另一组选项分开。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19246156
复制相关文章
相似问题
腾讯云开发者
