Классы BS4 разбиваются на HTML Component Refactor в Angular

Question

В настоящее время я создаю компоненты в Angular, но я хочу, чтобы определенный раздел был реорганизован для компонента, поскольку он будет повторно использоваться в других компонентах.Когда в родительский компонент помещается блок html, содержащий только классы начальной загрузки 4, пользовательский интерфейс отображается правильно.

Однако, когда я реорганизую это в другой компонент, пользовательский интерфейс прерывается, несмотря на то, что добавлены только классы начальной загрузки 4.

Я пробовал разные версии ViewEncapsulation, но это не помогает ситуации.Я проверил инструменты разработчика Chrome, но, несмотря на настройку ViewEncapsulation.None, к селектору компонентов все еще добавляются некоторые классы.

Я не уверен, что мне не хватает, но моя идея в том, что используемые классы - это просто встроенные классы начальной загрузки 4, и мне интересно, почему пользовательский интерфейс ломается.

Answer 1

Исходя из моего комментария выше, , пожалуйста, отметьте этот стек ;

• 1-я форма соответствует вашему первому скриншоту
• 2-я форма соответствует вашему второму скриншоту - основная проблема в вашем вопросе ... потому что вы вставили тот же класс col-[xx]-4, который у вас был в форме # 1
• 3-я форма - это решение, которое я предложил ... поскольку навыки теперь являются отдельным компонентом, мы должны вставить col-[xx]-12 как класс внутри него

Надеюсь, это поможет, иначе вы можете раскошелиться на стек и поделитесь своим ответом здесь в комментариях.