twitter-bootstrap 使 asp.net radiobuttonlist 显示为引导按钮组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27140370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make asp.net radiobuttonlist appear as bootstrap button group
提问by KidBatman
I have a settings page that allows user's to toggle certain alerts on and off.
These on and off switches are of a RadioButtonListcontrol. I have not had any luck trying to use bootstrap classes or custom classes to get the affect I want.
我有一个设置页面，允许用户打开和关闭某些警报。这些通断开关是一个RadioButtonList控制。我没有任何运气尝试使用引导类或自定义类来获得我想要的效果。
Essentially I have this:
基本上我有这个：
But I would like it to resemble something like this:
但我希望它类似于这样的东西：
If any of you have had success styling asp.net RadioButtonListin such a way I would appreciate your help!
如果你们中的任何人asp.net RadioButtonList以这种方式成功地设计了样式，我将不胜感激！
EDIT
编辑
I have attempted forcing classes on the list items themselves
我曾尝试在列表项本身上强制类
<div class="btn-group">
<asp:RadioButtonList ID="Rbl_MinBal" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="On" Value="0" class="btn btn-default" />
<asp:ListItem Text="Off" Value="1" class="btn btn-default" />
</asp:RadioButtonList>
</div>
Not Ideal:
不理想：
回答by the_lotus
I was able to render it properly by setting the css and the data-toggle at the right place.
我能够通过在正确的位置设置 css 和 data-toggle 来正确呈现它。
<asp:RadioButtonList ID="test" runat="server" RepeatLayout="flow" RepeatDirection="Horizontal" CssClass="btn-group" data-toggle="buttons">
<asp:ListItem class="btn btn-default">Item 1</asp:ListItem>
<asp:ListItem class="btn btn-default">Item 2</asp:ListItem>
<asp:ListItem class="btn btn-default">Item 3</asp:ListItem>
<asp:ListItem class="btn btn-default">Item 4</asp:ListItem>
</asp:RadioButtonList>
回答by Ibrar
use below code to get same result
使用下面的代码得到相同的结果
<div id="radio-group" class="btn-group" data-toggle="buttons">
<asp:RadioButton GroupName="myGroup" ID="RadioButton1" runat="server" Checked="True" CssClass="btn btn-default" Text="On" />
<asp:RadioButton GroupName="myGroup" ID="RadioButton2" runat="server" CssClass="btn btn-default" Text="Off" />
</div>
CSS
CSS
#radio-group label {
margin: 0;
}
JQuery
查询
$("#radio-group :radio").each(function () {
if ($(this).is(':checked')) {
$(this).parent().addClass("active");
}
});
