Bootstrap css不适用于角度动态注入的组件答案

【问题标题】：Bootstrap css not working on dynamically injected components in angularBootstrap css不适用于角度动态注入的组件
【发布时间】：2020-12-17 09:54:39
【问题描述】：

我有一个类似的代码块：

  <div class="col-md-12">
    <div class="row">
      <ng-template dynamicComponents></ng-template>
    </div>
  </div>

dynamicComponents 是我注入动态组件的指令。

所有应用程序都使用 Bootstrap 并且工作正常，但动态注入的组件正在缩小或无法使用 bootstrap css，我什至尝试使用 encapsulation: ViewEncapsulation.None 但它似乎不起作用。

请参考以下截图：

这里一切正常，直到 class=row 并且它正在占用整个宽度，但是一旦注入名为 app-from-builder-components-editor 的动态组件，它就会破坏引导属性，请参见下文：

我该怎么做才能让引导属性工作？

【问题讨论】：

bootstrap 是如何集成到您的应用中的？索引中的 css、html 或 scss 是否包含在 styles.scss 中？
@Marc 从 angular.json 中的 css 使用
一种解决方法是使用角材料和角弹性布局：tburleson-layouts-demos.firebaseapp.com/#/docs。
从 angular.json 文件中删除它，并将其写入你的 styles.css @import 'bootstrap/dist/css/bootstrap.css'
@Flightdoc5242 也不能这样工作，我已经尝试将文件放在不同的位置/方法

标签： css angular bootstrap-4

【解决方案1】：

问题在于您的组件主机（app-form-builder-components-editor）位于您的 row 和 col div 之间。为了使它工作，你的 'col-md-12' div 应该是你的 'row' div 的直接子级。

您可以将<div class="row"> 放入您的 app-form-builder 组件的模板中以解决此问题。

【讨论】：

【解决方案2】：

我通过使用容器解决了这个问题：

<ng-template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <!-- content --> 
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <!-- content --> 
      </div>
    </div>
  </div>
</ng-template>

不理想，但它似乎停止了布局问题。出于某种原因，Angular 模板似乎重写了 DOM 并嵌套了行。这“解决”了问题。

【讨论】：