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

Question

我有一个代码块，例如：

  <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注入了一个名为的动态组件，它就会破坏引导属性，请参见下文：

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

标签： cssangularbootstrap-4

Answer 1

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

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