如何使用引导程序使表格内的单选按钮看起来像一个按钮？

Question

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

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

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

这是我所拥有的

我有的

这是 我想要的

我试图放置一个包含一排要应用的按钮的 div，class="btn-group btn-group-toggle" data-toggle="buttons"但我没有让它工作。如果我在标签中编写该代码<tr>，它可以工作，但上面的行会移到屏幕的右侧。

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

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

但按钮内的文字没有居中

非常感谢您的时间和帮助！

Answer 1

这是基于本教程的解决方案。您绝对可以通过使用他们提出的其他一些建议（例如在:hover和上设置样式:focus）来改进它——出于美观和可访问性的原因，我建议这样做。单选按钮用opacity: 0and隐藏width: 0，标签覆盖它们是因为position: fixed（这需要一个祖先position设置为 以外的东西static）因为标签紧跟在标记中的输入元素之后，所以当隐藏的输入通过.better-radio:checked + label..better-radio {&nbsp; opacity: 0;&nbsp; position: fixed;&nbsp; width: 0;}label {&nbsp; display: inline-block;&nbsp; padding: 10px 20px;&nbsp; border: 1px solid black;&nbsp; border-radius: 4px;&nbsp; background-color: lightgrey;}.better-radio:checked + label {&nbsp; background-color: lightgreen;&nbsp; border-color: green;}<table class="table table-responsive">&nbsp; <thead class="thead-light">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="col">Zona Sísmica</th>&nbsp; &nbsp; &nbsp; <th scope="col">I</th>&nbsp; &nbsp; &nbsp; <th scope="col">II</th>&nbsp; &nbsp; &nbsp; <th scope="col">III</th>&nbsp; &nbsp; &nbsp; <th scope="col">IV</th>&nbsp; &nbsp; &nbsp; <th scope="col">V</th>&nbsp; &nbsp; &nbsp; <th scope="col">VI</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="row">Valor factor Z</th>&nbsp; &nbsp; &nbsp; <div class="btn-group btn-group-toggle" data-toggle="buttons">&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="better-radio" type="radio" name="z" id="zop1" value="0.15" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="zop1" class="btn btn-outline-primary">0.15</label>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="better-radio" type="radio" name="z" id="zop2" value="0.25" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="zop2" class="btn btn-outline-primary">0.25</label>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="better-radio" type="radio" name="z" id="zop3" value="0.30" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="zop3" class="btn btn-outline-primary">0.30</label>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="better-radio" type="radio" name="z" id="zop4" value="0.35" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="zop4" class="btn btn-outline-primary">0.35</label>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="better-radio" type="radio" name="z" id="zop5" value="0.40" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="zop5" class="btn btn-outline-primary">0.40</label>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="better-radio" type="radio" name="z" id="zop6" value="0.50" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="zop6" class="btn btn-outline-primary">&ge;0.50</label>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>

Answer 2

检查这个例子，它有效。div label input {&nbsp; &nbsp;margin-right:100px;}body {&nbsp; &nbsp; font-family:sans-serif;}#ck-button {&nbsp; &nbsp; margin:4px;&nbsp; &nbsp; border-radius:4px;&nbsp; &nbsp; border:1px solid #D0D0D0;&nbsp; &nbsp; overflow:auto;&nbsp; &nbsp; float:left;}#ck-button:hover {&nbsp; &nbsp; border:1px solid red;}#ck-button label {&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:4.0em;}#ck-button label span {&nbsp; &nbsp; text-align:center;&nbsp; &nbsp; padding:3px 0px;&nbsp; &nbsp; display:block;}#ck-button label input {&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:-20px;}#ck-button input:checked + span {&nbsp; border: 1px solid blue;}<div id="ck-button">&nbsp; <label>&nbsp; &nbsp; &nbsp;<input type="radio" value="1"><span>red</span>&nbsp; </label></div>