如何修复div class =“ row” angular + bootstrap中的项目

Question

有人知道如何使用class="row"修复div中的元素吗？

应如何显示： Good view，点击：Live show（不带角度的示例）

外观如何： Bad view

在灯光组件中重复使用开关组件
当我删除看起来不错的<div class="row"></div>元素时，但are under themselves

<div class="row">
    <app-switch  *ngFor="let switch of switches" [switch]="switch"></app-switch>
</div>

链接到我的存储库：SmartPi-Client

Answer 1

问题在于，将列的样式应用于带有“ row”类的html元素的直接子元素/ ren。

您可以将该类添加到您的应用程序开关组件标签中，或在其周围使用包装器来定义col设计

Answer 2

不是将 .col-sm-12 .col-md-6 .col-xl-4 添加到app-switch的子div，而是将其添加到app-switch。

<div class="row">
    <app-switch class="col-sm-12 col-md-6 col-xl-4" *ngFor="let switch of switches" [switch]="switch"></app-switch>
</div>

Answer 3

这是因为Bootstrap 4使用的是Flexbox。 app-switch选择器介于.row和.col div之间，因此未将正确的引导程序样式应用于它们。 您可以使用以下CSS代码使浏览器忽略此app-switch选择器。

:host {
  display: contents;
}

我在这里添加了一个工作示例。 https://stackblitz.com/edit/angular-ho3q4q