在 Bootstrap css 网格内展开列移动其他列答案

【问题标题】：Expand column inside Bootstrap css grid shifts other columns在 Bootstrap css 网格内展开列移动其他列
【发布时间】：2019-07-27 04:42:26
【问题描述】：

我有一个包含展开组件的引导网格。

我的实际问题是，当我展开一列时，其他列会移动，因为它们在同一行中。

我想知道如何使列相互独立

展开组件

<p>
  <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Toggle
  </button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
  <div >
    <div class="">
      You can collapse this card by clicking Toggle
    </div>
  </div>
</div>

应用组件（容器）

<div class="row">
  <div *ngFor="let card of cards; let index=index" class="col-4 col-sm-4 col-xl-4">
    <app-expend></app-expend>
  </div>
</div>

这是正在发生的事情

这就是我的期望

这是一个example 来说明我的实际问题

【问题讨论】：

标签： html css angular bootstrap-4 bootstrap-grid

【解决方案1】：

您需要手风琴吗？检查这个例子， https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

【讨论】：

不，这不是我要找的，我已经用插图更新了我的问题，你可以检查一下
你能在每个块中添加数字吗？
我应该在桌面上找到解决方案，但现在我在移动设备上遇到了另一个问题，请看这里你有一个指向桌面上实际解决方案的链接stackoverflow.com/questions/55025068/…