BS4 类打破 Angular 中的 HTML 组件重构答案

【问题标题】：BS4 classes break on HTML Component Refactor in AngularBS4 类打破 Angular 中的 HTML 组件重构
【发布时间】：2019-09-24 16:12:00
【问题描述】：

我目前正在 Angular 中构建组件，但我希望将某个部分重构为一个组件，因为这将在其他组件中重用。当仅包含 bootstrap 4 类的 html 块放置在父组件中时，UI 会正确显示。

但是，当我将其重构为另一个组件时，尽管只附加了引导程序 4 个类，但 UI 会中断。

我尝试了不同版本的 ViewEncapsulation，但对这种情况没有帮助。我确实检查了 Chrome 的开发人员工具，但尽管设置了 ViewEncapsulation.None，组件选择器上仍然附加了一些类。

我不确定我错过了什么，但我的想法是因为所使用的类只是内置的 bootstrap 4 类，我想知道为什么 UI 会中断。

【问题讨论】：

从外观上看，技能部分似乎应用了一个 col--4 类（当技能部分是页面的一部分时，这个类就可以了.. . 占据 4 列）... 但是当你将它放在不同的组件中时，你必须用 col--12 替换它；这是因为当技能部分转到一个单独的组件时，该单独的组件应该被完全填满（所有 12 列）；

【解决方案1】：

继续我上面的评论，kindly check this stackblitz;

希望它有所帮助，否则您可以分叉堆栈闪电战并在 cmets 中分享您的回复。

【讨论】：