自舉列和可變高度段

Question

使用Bootstrap 3.3.7並嘗試將17段變量高度轉換爲高分辨率，2列（col-sm-6）的3列（col-md-4）佈局或1列（col-xs-12）。無論是三列還是兩列，我想最終都會得到一個可以產生接近相同高度的列的佈局。嘗試創建靈活的佈局，因爲段落來源不是靜態的。

我想：

<p class="col-md-4 col-sm-6 col-xs-12">...</p> 

但由於段落是可變的高度，但它並沒有真正的工作了我希望的方式。有沒有什麼辦法可以讓段落在任何有空間的地方流動，而不用單獨使用Bootstrap留下空白空間？與薩斯組合怎麼樣？

Answer 1

解決了這個問題，使用CSS媒體查詢和擺脫Bootstrap類。

/* Extra small */ 
@media (min-width: 480px) { 
    .faqs { 
    -webkit-column-count: 1; 
    -moz-column-count: 1; 
    column-count: 1; 
    } 
} 

/* Small */ 
@media (min-width: 768px) { 
    .faqs { 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
    } 
} 

/* Medium */ 
@media (min-width: 992px) { 
    .faqs { 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
    } 
} 

/* Large */ 
@media (min-width: 1200px) { 
    .faqs { 
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4; 
    } 
} 

article { 
    break-inside: avoid-column; // keep articles together 
}