在Bootstrap CSS网格内扩展列以移动其他列

时间:2019-03-05 16:33:42

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

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

我的实际问题是,当我扩展一列时,其他列会因为它们在同一行而移位。

我想知道如何使列彼此独立

扩展组件

<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>

这就是我想做的

What I get

这就是我的期望

What I expect

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

1 个答案:

答案 0 :(得分:0)

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