在Bootstrap CSS网格内扩展列以移动其他列 [英] Expand column inside Bootstrap css grid shifts other columns

问题描述

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

I have a bootstrap grid that contain an expand component.

我的实际问题是，当我扩展一列时，其他列会发生位移，因为它们位于

My actual problem is that when I expand one column, the other columns get shifted because they are in the same row.

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

I would like to know How can I make column independs each one to another

展开组件

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

这就是我想做的事情

这就是我的期望

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

Here's an example to illustrate my actual problem

推荐答案

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

Is accordion what you need? Check this example, https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

这篇关于在Bootstrap CSS网格内扩展列以移动其他列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！