BS4类中断了Angular中的HTML组件重构

Question

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

但是，当我将其重构为另一个组件时，尽管仅附加了bootstrap 4类，但UI还是中断了。

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

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

Answer 1

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

• 第一个表格与您的第一个屏幕截图相同
• 第二个表格是您的第二个屏幕截图-问题中的主要问题...这是因为您粘贴了与表格＃1中相同的类col-[xx]-4
• 第三种形式是我提出的解决方案...由于技能现在是一个单独的组成部分，我们应该将col-[xx]-12作为其中的类

希望它会有所帮助，否则您可以进行堆叠式闪电战并在评论中分享您的回复。