如何删除 ng-bootstrap 单选按钮中的选择指示符（点）

Question

这里是ngbootstrap提供的例子。

我将仅更改标签和值的相同代码复制到我的 angular 项目中，并得到以下结果。

这是渲染后的 HTML

<div _ngcontent-c1="" class="btn-group btn-group-toggle special ng-valid ng-dirty ng-touched" name="radioBasic" ngbradiogroup="" role="group" ng-reflect-name="radioBasic" ng-reflect-model="user1">
      <label _ngcontent-c1="" class="btn-primary btn active" ngbbuttonlabel="">
        <input _ngcontent-c1="" ngbbutton="" type="radio" value="user1" ng-reflect-value="user1" name="radioBasic">User1
      </label>
      <label _ngcontent-c1="" class="btn-primary btn" ngbbuttonlabel="">
        <input _ngcontent-c1="" ngbbutton="" type="radio" value="user2" ng-reflect-value="user2" name="radioBasic">User2
      </label>

    </div>

为什么我的结果和例子不一样？如何删除选择点？

任何修复或指向文档的指针将不胜感激！

编辑：

版本在这里

Angular命令行界面：1.6.1

Angular: 5.1.3

bootstrap@4.0.0-alpha.6

@ng-bootstrap/ng-bootstrap@1.0.0-beta.9

Answer 1

升级到 bootstrap@4.0.0-beta.3 以使用 @ng-bootstrap/ng-bootstrap@1.0.0-beta.9。

如果你被锁定到bootstrap@4.0.0-beta.2 (angular-cli issue) you can downgrade to @ng-bootstrap/ng-bootstrap@1.0.0-beta.8. But note that live ng-bootstrap docs show the latest version and btn-group-toggle class was previously unnecessary 1.0.0-beta.8.

工作demo

Answer 2

ng-bootstrap@1.0.0-beta.9 与 bootstrap@4.0.0-alpha.6 不完全兼容。

随着 bootstrap 4 beta 3 的发展和改变单选和复选框系统，ng-bootstrap 不再适用于以前的版本。

最佳解决方案是跳转到 bootstrap@4.0.0-beta.3。

如果不能，你应该保留ng-bootstrap@1.0.0-beta.8。

Answer 3

Why my result is different from the example?

我认为这种行为的原因是 Bootstrap and ng-bootstrap.

之间的冲突

您可能在同一个页面上同时使用它们，当 Bootstrap 库发现类型为 'radio' 的 input 元素时，它会生成那些选择点。

How can I remove the selection dots?

使用任何 CSS 选择器访问该单选 input 元素，然后将其 display 属性更改为 none，例如：

input {
  display: none;
}

这将从页面中删除那些选择点。

如何删除 ng-bootstrap 单选按钮中的选择指示符（点）

How to remove the selection indicator(dot) in ng-bootstrap radio buttons

twitter-bootstrap

bootstrap-4

ng-bootstrap

angular