Bootstrap 单选按钮：单选圆圈去除答案

【问题标题】：Bootstrap Radio button : radio circle removalBootstrap 单选按钮：单选圆圈去除
【发布时间】：2014-12-09 05:39:45
【问题描述】：

我正在尝试将 Bootstrap 用于我的网站。我有单选按钮，我正在尝试使用引导程序中的“按钮”。

<td style="margin-bottom:0px; padding-bottom: 0px;font-size=12px;vertical-align:bottom;">
    <div class="btn-group" data-toggle="buttons" id="topButtonDiv" >
        <button type="button" class="btn btn-primary">Home
        <input type="radio" id="radio1" ></button>
        <button type="button" class="btn btn-primary">Home1
        <input type="radio" id="radio2" > </button>
        <button type="button" class="btn btn-primary">Home2
        <input  type="radio" id="radio7"> </button>                
     </div>
</td>

我面临的问题是我仍然在单选按钮中看到圆圈，而在 Bootstrap 示例中，我看不到这样的圆圈。

http://getbootstrap.com/javascript/#buttons-usage

你能告诉我我在这里缺少什么吗？

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

如果 css 版本更新不起作用，另一种选择是使用 css 手动隐藏单选按钮

[type='radio'] {
display: none; 
}

【讨论】：

这在使用 react-bootstrap 时对我有用，为 ToggleButton 组件提供自定义 bsClass。

【解决方案2】：

检查您添加的 CSS 版本。相同的btn-group 类工作正常here

【讨论】：

嗯，你是对的。看起来我下载了错误的版本（不确定我是如何从同一个网站获得的）。现在可以了。
检查data-toggle="buttons" 何时被删除。单选按钮回来了。

【解决方案3】：

您对引导单选按钮的标记是错误的，您可以这样：

<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>

此外，您不能将输入元素放在按钮元素中。这是无效的 html。

【讨论】：

我在以前的版本中有标签而不是按钮。那没起效。所以只需将标签更改为按钮，看看是否有效。