javascript - 在我的网页中实现可调整和可关闭的列

Question

我正在实现一个元素仪表板，其中我有 3 个可调整的列，当它们一起打开时它们共享屏幕宽度，我可以关闭 1 个或多个面板(列)然后列的其余部分将调整以共享空间，这是一个工作演示->

站点是https://www.pivotaltracker.com ，我如何获得这个功能，到目前为止我只知道 Bootstrap 网格列，但是如何进行这样的动态调整？(这对于简单的 Bootstrap 网格是不可能的) - 因为我也想要关闭面板和打开面板功能.

Answer 1

关于 bootstrap，我认为你可以为每个 div 提供一个 col 类，这样可用空间将划分到现有的 div 中。

<div class="row">
 <div class="col">col1</div>
 <div class="col">col2</div>
</div>

或者使用纯 CSS(especillay flexbox)你可以应用 flex-grow:1;给每个子 div，

<div class="contaier">
 <div>box1</div>
 <div>box2</div>
</div>

.container {
 display:flex;
}
.contaier div {
 flex-grow: 1;
}