Bootstrap 4.6单选框未与按钮融合，独立显示于btn-group的问题排查

我帮你梳理下代码里的几个关键问题，这些就是导致单选框没有和按钮融合的核心原因：

主要错误点 #

• 标签与单选框的关联失效：你所有<label>的for属性都写的btnradio1，但每个单选框都没有设置独有的id，这会导致点击标签无法触发单选框的选中状态，单选框也就会独立显示出来。
• 存在无效HTML属性：部分单选框里有多余的billing-button属性，这不是标准HTML属性，会干扰组件的正常渲染逻辑。
• 缺少必要的JS依赖：你只引入了Bootstrap的CSS文件，但data-toggle="buttons"功能需要依赖jQuery和Bootstrap JS才能生效，没有这些脚本的话，按钮组的单选交互无法正常工作。

修正后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<div class="row btn-group" data-toggle="buttons" role="group" style="display:flex;background-color:white;margin-top:10px">
  <label class="btn btn-secondary active col-md-3 no-padding-laterals shadow-none" for="btnradio1">
    <input type="radio" name="options" class="btn-check billing-button" id="btnradio1" value="4" checked autocomplete="off"> Total
  </label>
  <label class="btn btn-secondary col-md-2 no-padding-laterals shadow-none" for="btnradio2">
    <input type="radio" name="options" class="btn-check billing-button" id="btnradio2" value="1" autocomplete="off"> T
  </label>
  <label class="btn btn-secondary col-md-2 no-padding-laterals shadow-none" for="btnradio3">
    <input type="radio" name="options" class="btn-check billing-button" id="btnradio3" value="2" autocomplete="off"> A
  </label>
  <label class="btn btn-secondary col-md-2 no-padding-laterals shadow-none" for="btnradio4">
    <input type="radio" name="options" class="btn-check billing-button" id="btnradio4" value="3" autocomplete="off"> E
  </label>
  <label class="btn btn-secondary col-md-2 no-padding-laterals shadow-none" for="btnradio5">
    <input type="radio" name="options" class="btn-check billing-button" id="btnradio5" value="0" autocomplete="off"> H
  </label>
</div>

关键修改说明 #

1. 建立标签与单选框的正确关联：给每个单选框添加独有的id，并让对应<label>的for属性匹配这个id，这样点击标签就能触发单选框的选中状态，同时Bootstrap的btn-check类会自动隐藏单选框。
2. 移除无效属性：删掉了单选框里多余的billing-button属性，保证代码规范。
3. 引入必要的JS文件：添加了jQuery和Bootstrap JS的CDN链接，确保data-toggle="buttons"的交互逻辑能正常运行。
4. 添加autocomplete="off"：避免浏览器自动填充单选框导致按钮状态异常的问题。
5. 调整列类：你用的col-md-2-1qtr不是Bootstrap标准列类，我暂时换成了col-md-2，如果需要自定义宽度，你可以自己给col-md-2-1qtr写CSS样式（比如width: calc(100% / 4.5);）来实现需求。

这样修改后，单选框就会和按钮完美融合，点击按钮就能正常切换单选状态啦！

内容的提问来源于stack exchange，提问作者Lechucico