响应网格中每行的列数

Question

有没有办法计算出每行中有多少列？基于响应式视口而不更改html。

<div class="row">
   <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
   <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   <div class="col-xs-6 col-sm-10">.col-xs-6 .col-sm-10</div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   <div class="col-xs-6 col-sm-4 col-lg-10">.col-xs-6 .col-sm-4 col-lg-10</div>
   <div class="col-xs-6 col-sm-4 col-md-2">.col-xs-6 .col-sm-4 col-md-2</div>
</div>

例如：每行的列数

Default (XS) 
1
2
2
2

Medium
2
1
1
3

Large
2
1
1
1
2

示例包含5行的大视口 https://codepen.io/anon/pen/JGwdmO

Answer 1

我认为没有办法“计算”它。我想到了什么：

var columns = [1, 2, 2, 2]; // default

var viewportWidth = $(window).width();

if (viewportWidth >= 1200){ // large
    columns = [2, 1, 1, 1, 2];
}
else if (viewportWidth >= 992) { // medium
    columns = [2, 1, 1, 3];
}  

要响应窗口调整大小事件，您可以订阅

$(window).resize(function() {
   ...
});