如何防止我的div与扩展面板一起移动

Question

我正在尝试像这样进行可视化：

我使用了内置的card和card-column引导程序。但是，当我展开一个面板时，我所有的<div>都在随机移动：

我希望其他扩展面板在打开时不会移动。这是一个示例：StackBlitz。

Answer 1

我一直在测试您的stackblitz代码，“问题”在第8行：

<div class="card-columns">

恰好在类名中，“ card-columns”是预定义的类，可能在BootStrap预定义类中。

我的建议是删除此类，并使用其他替代方法，例如flex-layout。 或使用html列。

我已经分叉了您的stackblitz代码，并使用html列解决了该问题： https://stackblitz.com/edit/angular-material-bootstrap-css-qmrzcm

下一步是在每列之间添加自定义填充。