Javascript 如何使用bootstrap使表中的单选按钮看起来像button？

我还不能解决一个关于引导的问题，但我希望有人能给我一些建议来解决它：）

我有一个表格，其中显示了用户可以选择的不同选项。我使用单选按钮来显示不同的选项，因为我只想选择其中一个选项

我在使用单选按钮时遇到的问题是，我不希望圆圈显示出来

这是我的

这是我想要的

我试图放置一个包含一行按钮的div，以应用

class=“btn group btn group toggle”data toggle=“buttons”

，但我没有让它工作。如果我在

标记中写入该代码，它可以工作，但上面的行会移到屏幕的右侧

此外，我还尝试使用css隐藏圆圈

input[type=radio]{
    visibility: hidden;
}

但按钮内的文本未居中

非常感谢您的时间和帮助

这是我的密码：

<table class="table table-responsive">
  <thead class="thead-light">
    <tr>
      <th scope="col">Zona Sísmica</th>
      <th scope="col">I</th>
      <th scope="col">II</th>
      <th scope="col">III</th>
      <th scope="col">IV</th>
      <th scope="col">V</th>
      <th scope="col">VI</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Valor factor Z</th>
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <td>
          <label class="btn btn-outline-primary">
             <input type="radio" name="z" id="Zop1" value="0.15"> 0.15                        
          </label>
        </td>
        <td>
          <label class="btn btn-outline-primary">
            <input type="radio" name="z" id="Zop2" value="0.25"> 0.25
          </label>
        </td>
        <td>
          <label class="btn btn-outline-primary">
            <input type="radio" name="z" id="Zop3" value="0.30"> 0.30
          </label>
        </td>
        <td>
          <label class="btn btn-outline-primary">
            <input type="radio" name="z" id="Zop4" value="0.35"> 0.35
          </label>
        </td>
        <td>
          <label class="btn btn-outline-primary">
            <input type="radio" name="z" id="Zop5" value="0.40"> 0.40
          </label>
        </td>
        <td>
          <label class="btn btn-outline-primary">
            <input type="radio" name="z" id="Zop6" value="0.50"> &ge;0.50
          </label>
        </td>
      </div>
    </tr>
  </tbody>
</table>

斯米卡带
我
二,
三,
四,
v
不及物动词
英勇因子Z
0.15
0.25
0.30
0.35
0.40
&通用电气；0.50

检查此示例，它可以工作

div标签输入{
右边距：100px；
}
身体{
字体系列：无衬线；
}
#ck按钮{
保证金：4倍；
边界半径：4px；
边框：1px实心#d0；
溢出：自动；
浮动：左；
}
#ck按钮：悬停{
边框：1px纯红；
}
#ck按钮标签{
浮动：左；
宽度：4.0em；
}
#ck按钮标签范围{
文本对齐：居中；
填充：3px0px；
显示：块；
}
#ck按钮标签输入{
位置：绝对位置；
顶部：-20px；
}
#ck按钮输入：选中+span{
边框：1px纯蓝色；
}

红色

这里有一个基于的解决方案

通过使用他们提出的一些其他建议（例如在

：hover

和

：focus

上设置样式），您肯定可以改进它——出于美观和易访问性的原因，我建议您这样做

单选按钮是隐藏的，具有

不透明度：0

和

宽度：0

，标签覆盖它们是因为

位置：固定的

（这需要将

位置

设置为非

静态的祖先）

由于标签紧跟在标记中的输入元素之后，因此当通过
检查/取消检查隐藏输入时，可以动态设置标签的样式。更好的收音机：checked+label


。更好的收音机{
不透明度：0；
位置：固定；
宽度：0；
}
标签{
显示：内联块；
填充：10px 20px；
边框：1px纯黑；
边界半径：4px；
背景颜色：浅灰色；
}
.更好的收音机：选中+标签{
背景颜色：浅绿色；
边框颜色：绿色；
}

斯米卡带
我
二,
三,
四,
v
不及物动词
英勇因子Z
0.15
0.25
0.30
0.35
0.40
&通用电气；0.50
该代码不包含或模拟单选按钮。你能解释一下“它有效”是什么意思吗？谢谢你的回答Sameera！这是一种工作，但当被选中时，按钮颜色部分的波顿，不是100%的担心我没有看到图像，希望现在它是正确的谢谢@SameeraHerath！非常感谢你，猫！这真的很有帮助：）