Question

我正在尝试将Bootstrap用于我的网站。我有单选按钮，我试图使用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

你能让我知道我在这里缺少什么吗？

Answer 1

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

Answer 2

如果css版本更新不起作用，另一种方法是使用css

手动隐藏单选按钮

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

Answer 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。

Bootstrap单选按钮：无线电圆圈移除

3 个答案: