html - 在 Bootstrap css 网格中展开列移动其他列

标签 html css angular bootstrap-4 bootstrap-grid

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

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

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

展开组件

<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来说明我的实际问题

最佳答案

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

关于html - 在 Bootstrap css 网格中展开列移动其他列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55007478/

相关文章:

javascript - HTML 与组件的 knockout SPA 尝试,绑定(bind)不起作用

Angular 2 ngIf 可观察?

jquery - 选中复选框时将类添加到表

html - 如何修改 angularJS 中的 md-input-container

html - 如何在不使用边框和宽度 : 0. 的情况下做到这一点 我正在尝试按百分比设置其宽度以提高设备灵活性

javascript - 两个独立的滚动区域简单的解决方案

html - 是否可以将 CSS @media 规则内联?

javascript - 是否可以在现有服务器上使用服务器端渲染?

node.js - angular2 2.0.0 未满足的对等依赖关系 rxjs@5.0.0-beta.12,npm WARN angular2-jwt@0.1.22 需要 rxjs@5.0.0-beta.11 的对等体

html - 如何将列中的表行拆分为固定宽度