保留Bootstrap按钮外观的单label多输入焦点问题处理

这个异常焦点跳转是HTML原生<label>元素的默认交互规则导致的，和Bootstrap的按钮样式、逻辑无直接关联：

当<label>内部嵌套多个可交互表单控件时，点击label任意区域的默认动作，会自动将焦点/激活状态转移到label关联的第一个后代可交互表单控件，也就是代码中放在最前面的单选按钮。
现有结构里，每个带输入框的label内部同时包含单选按钮、额外文本/数字输入框两个控件，点击后者时，事件会冒泡到label层，触发原生label的默认行为，直接把焦点切回单选按钮，阻断了输入框本身的聚焦流程。

方案1：最小改动适配现有代码 #

仅需少量JS拦截label内部非radio类型输入框的点击事件，阻止事件向上冒泡触发label的默认逻辑，完全保留原有DOM结构和视觉效果：

// 选中按钮组内嵌套在label里的非radio输入框
document.querySelectorAll('.btn-group .btn input:not([type="radio"])').forEach(inputEl => {
  inputEl.addEventListener('click', (e) => {
    e.stopPropagation();
  })
})

• 交互验证：点击label上除内部输入框外的其他区域，依然会正常触发单选按钮选中、Bootstrap按钮的激活态切换；点击内部输入框时，事件不会冒泡到label层，不会触发焦点跳转到单选按钮的问题，输入框可正常聚焦输入。

方案2：调整DOM结构匹配语义规范 #

如果不想依赖JS做事件拦截，可以将额外输入框移出label的DOM层级，通过CSS对齐保持和原来完全一致的视觉效果，从根源上避免label抢焦点的问题：

1. 给每个label内的单选按钮设置唯一id，为label添加for属性和对应id绑定，保证label和单选按钮的关联关系不因为DOM调整失效
2. 将原来嵌套在label里的文本/数字输入框挪到label的同级位置，通过Bootstrap自带的flex布局、间距类将两个元素对齐到同一水平线，视觉上和原效果无差异
   调整后的参考结构：

<!-- 添加flex类保证内部元素水平对齐 -->
<div class="btn-group d-flex align-items-center" data-toggle="buttons">
  <label class="btn btn-primary mb-0" for="radio-single-bit">
    <input type="radio" name="options" id="radio-single-bit"/> 
    Single Bit
  </label>
  <!-- 输入框移出label层级，添加入边距和按钮对齐 -->
  <input 
    type="number" 
    name="other_reason" 
    placeholder="Enter bit number" 
    min="0" 
    max="4096"
    class="ms-2"
  />
</div>

这种结构下，label仅和内部的单选按钮存在关联关系，点击输入框时完全不会触发label的交互逻辑，从根源上解决焦点跳转问题，也更符合HTML的语义标准。

内容的提问来源于stack exchange，提问作者Brandon E Taylor