引導3：響應列中的面板出現故障

Question

我有一個頁面，其中的主要內容是一系列Bootstrap面板。在xs屏幕上，我想連續有一個面板，所以有效的是一個寬的列。在md屏幕上，我想每行有兩個面板，所以有效的兩列。我把每個小組在一列像這樣：

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

這工作幾乎是完美的，但在中等屏幕，取決於面板的高度，有多餘的空白垂直空間。看到下面的圖片爲我的意思：

的排序是對xs和md屏幕尺寸都相同是非常重要的。即，如果在屏幕XS面板去：

A 
-- 
B 
-- 
C 

然後在中等屏幕尺寸，它必須：

A | B 
------- 
C | 

jsBin是here（或jsFiddle如果您願意）。請注意，要進行重現，您需要擴大輸出/預覽窗格，以便使用中等屏幕尺寸樣式。

Answer 1

感謝蒂姆劉易斯的建議，我可以使用Masonry完成此操作。現在看來，這是相當簡單的，下面的JavaScript代碼片段至今的作品：

$('.row').masonry(
    {itemSelector: '.col-md-6'} 
); 

這擺脫了多餘的空間，並將其與響應式設計的作品。到目前爲止，我唯一的問題是摺疊/展開面板不太合適，但這不是最初問題的一部分，我認爲我可以通過在面板摺疊/展開後再次調用砌體來修復它。