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>

Columns