CSS 如何使用 Bootstrap 单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19659607/
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
How to use Bootstrap radio buttons?
提问by sbonkosky
I'm using Bootstrap 2.3.2and I can't seem to get radio buttonsto work. I'm using the code from Bootstrap's website:
我正在使用Bootstrap 2.3.2，但似乎无法开始radio buttons工作。我正在使用 Bootstrap 网站上的代码：
<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>
What do I need to do from here? With this I get 3 buttons, but clicking them doesn't change them to active and they don't look like they've been clicked.
我需要从这里做什么？有了这个，我得到了 3 个按钮，但是单击它们不会将它们更改为活动状态，并且它们看起来也没有被单击。
EDIT:
编辑：
If I initialize the buttons in JS like so:
如果我像这样在 JS 中初始化按钮：
$('.btn-group').button();
$('.btn-group').button();
This markup is generated for the group:
此标记是为组生成的：
<div class="btn-group ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only" data-toggle="buttons-checkbox"
role="button" aria-disabled="false">
<span class="ui-button-text">
<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>
</span>
</div>
Compared to this on the bootstrap website:
与引导程序网站上的相比：
<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 active">Right</button>
</div>
Not sure why it's working different here.
不知道为什么它在这里工作不同。
回答by zessx
Looking in Bootstrap 2.3.2 doc(see Usage section), you need to initialize your buttons :
查看Bootstrap 2.3.2 文档（参见用法部分），您需要初始化您的按钮：
$('.btn-group').button();
回答by zessx
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
Make sure to incluse the right class names and attach the stylesheet in the header
确保包含正确的类名并在标题中附加样式表
