如何確定Bootstrap 3列是否堆疊

Question

假設我們都知道當屏幕達到一定寬度時某些引導類會崩潰（例如，2個col-md-6將並排放在一個更大的屏幕上另一個在較小的屏幕上）。

我想知道的是，如何在列已摺疊時找出（使用jQuery或普通的舊JS）？我一直在思考和考慮使用寬度，但是據我所知，BS在很多情況下沒有明確指定寬度，所以我放棄了這一點。其次我雖然使用浮動屬性，但我無法讓它使用jQuery工作。

有什麼建議嗎？

非常感謝

Answer 1

擴展在什麼斯凱利說，你可以檢查窗口寬度看what size window bootstrap is calculating。

xs = width < 768px 
sm = width ≥ 768px 
md = width ≥ 992px 
lg = width ≥ 1200px 

元素是否堆疊取決於您分配給包含元素的類。所以，如果窗口寬度爲1200像素或更低，在992px以下的md -classed元素等

Answer 2

你可以檢查窗口寬度。在768個像素引導的div堆疊..

$(window).resize(function() { 
    if ($(this).width() < 768) { 
    console.log("stacked.."); 
    } 
}); 

演示：http://bootply.com/100820

Answer 3

這裏上會lg -classed元素上發生堆積的另一種方式：

1. 獲取父行並獲得它的寬度。
2. 獲取所有（其他）孩子並獲得其總寬度。

3. 將它們比較。

   var row_width = 0; 
   var children_width = 0; 
   var $row = $('.yourclass').parents('.row').first(); // get the row 
   if ($row && $row.length != 0) { 
       row_width = $row.width(); 
       $row.children().each(function() { 
        if ($(this).length != 0) { 
         children_width += $(this).width(); 
        } 
       }) 
   } 
   
   if (row_width < children_width) { 
       // do something 
   }