本文介绍了响应网格中每行的列数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有一种方法可以计算出每行有多少列?基于响应式视口,并且无需更改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 rowshttps://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() {
...
});
这篇关于响应网格中每行的列数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!