Html 除了单选按钮外，引导样式适用于所有内容

我正在练习用Angular处理表单，我喜欢使用bootstrap使事情看起来漂亮。出于某种原因，引导样式将应用于表单的其余部分，但只有单选按钮显示为默认HTML样式

我已经尝试过把类名放在哪里，改变输入的包装方式，但是没有任何效果。我应该提到的是，我正在网上学习教程，我的代码与讲师的代码完全匹配。然而，他的出现了漂亮的引导蓝色和白色，而我的保持灰色和黑色。我想解决这个问题，使它显示为蓝色和白色，请不要回答说它应该是灰色和黑色的

HTML

用户名 邮政 {{性别} 提交 打字稿

@组成部分{ 选择器：'应用程序根'， templateUrl:“./app.component.html”， 样式URL:['./app.component.css'] } 导出类AppComponent{ @ViewChild'f'注册表格：NgForm； defaultValue='teacher'； 答案=； 性别=[‘男性’、‘女性’]； }

---

您需要创建一个自定义单选按钮

从上面链接复制的示例

/*容器*/ .集装箱{ 显示：块； 位置：相对位置； 左侧填充：35px； 边缘底部：12px； 光标：指针； 字体大小：22px； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； 用户选择：无； } /*隐藏浏览器的默认单选按钮*/ .容器输入{ 位置：绝对位置； 不透明度：0； 光标：指针； } /*创建自定义单选按钮*/ .对号{ 位置：绝对位置； 排名：0； 左：0； 高度：25px； 宽度：25px； 背景色：eee； 边界半径：50%； } /*在鼠标悬停时，添加灰色背景色*/ .container:悬停输入~。选中标记{ 背景色：ccc； } /*选中单选按钮后，添加蓝色背景*/ .container输入：选中~.checkmark{ 背景色：2196F3； } /*创建点/圆指示器-未选中时隐藏*/ .勾选：之后{ 内容：； 位置：绝对位置； 显示：无； } /*选中时显示指示器点/圆*/ .容器输入：选中~。选中标记：之后{ 显示：块； } /*设置指示器点/圆的样式*/ .容器。选中标记：之后{ 顶部：9px； 左：9px； 宽度：8px； 高度：8px； 边界半径：50%； 背景：白色； } 自定义单选按钮 一 二 三 四

---

单选按钮是正确的。请看这个例子。我感谢你的评论，但这是错误的。在我过去的项目中，它们正确地显示了蓝色和白色的样式。只有在这个项目中，他们才会这样展示。好吧，你说得对。。。对我来说，这是一个口耳相传的时刻。事实证明，讲师使用的是不同的浏览器和操作系统，这解释了默认的差异。谢谢你的耐心！