Bootstrap 3 升级至 Bootstrap 4：按钮组转单选按钮问题求助

问题排查 #

你现在的Bootstrap 4代码有几个致命问题导致功能失效：

• 所有属性值里的多余空格（比如data-toggle="buttons "、href="#grid "）会让Bootstrap无法正确识别属性
• 两个单选按钮用了同一个id="option1"，单选按钮的id必须唯一，否则DOM选择和事件绑定都会出问题
• 错误嵌套了<a>标签，Bootstrap 4的按钮式单选组件不需要用<a>，直接用<label>包裹单选输入框就可以
• 激活状态的active类位置没问题，但需要确保和选中的单选按钮对应

修正后的代码 #

下面是符合Bootstrap 4规范的代码，保留了你原来的data-view属性，方便对接原有逻辑：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="view-options" id="option-grid" autocomplete="off" data-view="grid"> Table
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="view-options" id="option-graph" autocomplete="off" data-view="graph"> Graph
  </label>
</div>

适配原有显示/隐藏功能 #

原来的JS是监听<a>的点击事件，现在换成单选按钮，需要改成监听change事件：

// 监听单选按钮切换
$('input[name="view-options"]').on('change', function() {
  const targetView = $(this).data('view');
  // 先隐藏所有视图内容，再显示选中的目标视图
  $('.view-content').hide();
  $('#' + targetView).show();
});

// 页面加载时触发一次默认选中项的事件，确保初始显示正确
$('input[name="view-options"]:checked').trigger('change');

关于JS引入的疑问 #

Bootstrap 4的按钮组切换功能已经集成在核心的bootstrap.js（或bootstrap.min.js）里，不需要额外引入单独的按钮插件。你已经引入了Bootstrap 4 JS、jQuery和Popper.js，依赖完全足够，不用再加其他文件。

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