如何移除ng-bootstrap单选按钮选择圆点？效果为何与示例不符？

嘿，我来帮你拆解这个问题，结合你的版本信息和渲染后的HTML，咱们一步步搞定：

一、为什么实现效果和官方示例不符？ #

核心问题出在版本兼容性上：你用的bootstrap@4.0.0-alpha.6是Bootstrap 4的早期测试版，而@ng-bootstrap/ng-bootstrap@1.0.0-beta.9的设计是搭配Bootstrap 4的稳定正式版。两者的样式规则差异很大，导致按钮组的渲染效果偏离预期。

从你提供的渲染后HTML来看，组件的结构是正确的，但Bootstrap alpha版的按钮样式和ng-bootstrap的预期不匹配，才出现了视觉上的差异。

二、怎么移除单选按钮的选择圆点？ #

Bootstrap的按钮式单选组件原本就会自动隐藏原生的单选圆点，但因为版本不兼容，样式没生效。这里有两种解决方案：

方案1：修复版本依赖（推荐） #

针对你的Angular 5.1.3和ng-bootstrap beta.9，最稳妥的做法是把Bootstrap升级到4.0.0稳定版，执行以下命令：

npm install bootstrap@4.0.0 --save

升级后，不仅单选圆点会被默认样式隐藏，按钮组的选中/未选中状态样式也会和官方示例完全一致。

方案2：自定义CSS强制隐藏（临时应急） #

如果暂时没法升级版本，可以添加一段自定义CSS来隐藏原生单选按钮：

.btn-group-toggle input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

把这段代码放到你的全局样式文件（比如styles.css）里，就能隐藏圆点，同时不影响按钮的点击选择功能。

额外要检查的点 #

• 确保Bootstrap的CSS已经正确引入到你的Angular项目中：打开.angular-cli.json，在styles数组里确认有Bootstrap的路径：

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ]
  

• 如果你用的是SCSS，也可以在全局SCSS文件里通过@import "~bootstrap/scss/bootstrap";来引入样式。

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