Bootstrap 根据其他 div 的可见性重新定位 div答案

【问题标题】：Bootstrap re-positioning divs based on visibility of other divsBootstrap 根据其他 div 的可见性重新定位 div
【发布时间】：2014-09-25 10:23:57
【问题描述】：

我正在尝试根据其他 divs 的可见性重新定位 div。当屏幕尺寸减小时，它们会堆叠并隐藏/显示任何 div 自动使堆叠的divs 显示/隐藏没有任何空白区域，但不是正常的屏幕尺寸（笔记本电脑/台式机）。

看看这个jsbin

现在，取消选中任何复选框。如果一行只显示一个 div，那么我希望它调整大小以便它也占据隐藏的 div。

我正在为页面中的 2x2 div 使用 col-md-6 类。

<div class="col-md-6 column" id="1col"> </div>

【问题讨论】：

【解决方案1】：

试试这个：首先，在你的 .row 类中添加一个类名，这样你就不会在其他地方影响它，然后你使用下面的 CSS

.row{display:flex; justify-content:space-around}
.column{display:inline-flex; height:100%; width:auto;}

当然，您可以将.row 替换为（比如）.row.myColumns，但同时您可以只使用此代码在您的 jsbin 中进行测试。我在那里没有帐户，也不打算注册只是为了测试，所以我无法分叉它，但我使用 2、3 玩过你的代码，然后将所有四列移动到一行中，它工作得很好，所以你自己试试吧。

【讨论】：