我正在使用Bootstrap在两列网格中创建一个具有大量可变高度内容的响应式网站。目前一切功能都很好，但是我想摆脱行中两个项目的高度不同时出现的丑陋白色空间。我可以通过在每个中只有两个span6分区和独立行来轻松实现这一点，但问题是Bootstrap的小型显示器的网格堆叠将堆叠右列上方的所有左列，而信息应该向左流动到对，然后从上到下。
对于解决方案，我发现了以下主题：
...以及其他一些模糊的答案，但它们都不适合我，因为我不想对页面的呈现方式进行服务器端更改;相反，我想看看是否有办法通过修改仅 HTML，CSS和JS来解决这个问题，我想找到一个完全与Bootstrap有关的解决方案。我愿意接受HTML，CSS和JS的任何补充，但就像我说的那样，没有任何服务器端。
我掀起了一张桌子，可以看到我在做什么，问题是什么，以及我想要完成什么。请参阅http://i.imgur.com/AAl9ZBu.png。
非常感谢你的帮助。
更新：我想出了一个相当简单的想法来解决这个问题：在修复桌面布局但破坏移动布局的解决方案上使用双列范例，每隔一个网格项重复一次并在两者之间切换显示。例如，四项网格在左列中将包含项目1,2,3和4，项目2和4设置为显示：none，右列包含项目2和4.当@media（max）时-width：767px）变为true，左列中的项目2和4切换为显示：none将应用于整个左列。
这可能是效率最低的解决方案，所以我仍然希望阅读您的解决方案。
答案 0 :(得分：1)
您要求的已经是可能的，继续使用span *类创建不同的div。只要它们在同一行div中，你就可以使用像砌体（http://masonry.desandro.com/）这样的东西来强制将div推入间隙。
在你的响应式类中，使用标准的bootstrap css应该使每个span * div成为一个块，强制它们进入你想要的布局。
