在不更改浏览器窗口大小的情况下动态更改容器div的宽度时，Bootsrap网格不起作用

Question

我需要对角组件在手机，平板电脑和台式机上的外观进行设备预览。我有引导网格CSS的内容，并且我根据所选设备更改了容器div的宽度。调整浏览器窗口的大小后，它可以正常工作。但是，由于这是页面内的预览，因此我希望在不调整用户浏览器大小的情况下进行显示。

由于我使用Angular 8并使用了组件的绑定和一些拖放功能，所以我不希望基于iframe的解决方案。

myviewer组件代码：

<div class="container-fluid">
<div class="row"> 
<div *ngFor="let item of somecollection.items" [ngClass]="item.class"
                    [ngStyle]="{'height.px': item.size}" style="border-style: dashed;border-width: 1px;">
                    {{item.class}}
                </div>
            </div>

父组件：

<div [ngStyle]="{'width.px': viewWidth}" style="margin: 10px 0px 0px 0px;transition:width 300ms ease-in-out">
            <app-myviewer [prop1]="prop1" [prop2]="prop2"></app-myviewer>

</div>

由于我使用Angular 8并使用了组件的绑定和一些拖放功能，所以我不希望基于iframe的解决方案。