响应网格中每行的列数 [英] Number of columns per row in responsive grid

问题描述

有没有一种方法可以计算出每行有多少列?基于响应式视口，并且无需更改html.

Is there a way of working out how many columns are in each row? Based on the responsive viewport and without changing the 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

Example large viewport with 5 rows https://codepen.io/anon/pen/JGwdmO

推荐答案

我认为没有办法计算"它.想到的是:

I think there is no way to 'calculate' it. What comes to mind:

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];
}  

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

To respond to window resize event, you can subscribe to

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

这篇关于响应网格中每行的列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！