html - Bootstrap 列宽 - 删除其他容器时自动调整大小

Question

我在页面上显示了一些图表。顶行有4张图，使用

<div class="col-md-3 col-sm-4 col-xs-12">

下一行有两个图使用

<div class="col-md-6 col-sm-6 col-xs-12">

每个 DIV 都有一个关闭链接，可以将其从页面中删除。

是否有可能在关闭一个 DIV 时，其他 DIV 会自动调整大小以使用 12 列间距？

4 个图表，关闭 1 个，它从 col-md-3 变为 col-md-4，关闭另一个，它变为 col-md-6，关闭另一个，它变为 col-md-12。

对于底行，关闭 2 个图表中的 1 个以及对 col-md-12 的其他更改？

Answer 1

如果您提供 div id，则可以使用 javascript 替换类。

document.getElementById("MyID").className =
document.getElementById("MyID").className.replace(/\bcol-md-3\b/,'col-md-4');