html - Bootstrap网格列在Angular中重叠

Question

<div class="container container-fluid">
     <div class="row">
         <div class="col-lg-6">
             <app-profile [conId]="conId"></app-profile>
         </div>
         <div class="col-lg-6">
             <app-sales [conId]="conId"></app-sales>
         </div>
     </div>
</div>

我不知道为什么会这样。

可能是因为我将 Angular 组件标签包装在 Bootstrap 行和列中吗？我几乎可以肯定我以前做过这样的事情并且它奏效了。

我附上了一张正在发生的事情的图片，并突出显示了重叠的地方。

编辑：

如果我删除组件标签并添加一些背景颜色，似乎看起来不错。所以它实际上可能与组件本身有关？

<div class="row">
    <div style="background-color: red; height: 20px;" class="col-lg-6">    
    </div>
    <div style="background-color: yellow; height: 20px;" class="col-lg-6">
    </div>
</div>

列

标签： htmlcssangulartwitter-bootstrapbootstrap-4