Level 56
The problem is you cant adapt the number to chunk according to the viewport size. No solution here.
Bootstrap handle this pretty well not sure it really matters to change the number of user per lines according to the viewport size.
Apr 10, 2015
6
Level 55
Responsive Twitter Bootstrap grid, array_chunk()
As a simple example to demonstrate my question, let's say that I want to show all the users from my app in a grid.
Following the Crazy Simple Pagination video everything works well. Every six users, I create a new row. That is all well and good while I am using col-sm-2 since 2 goes into 12 six times.
What if I want to make the page responsive, so that I have something like:
<div class="col-md-2 col-sm-3 col-xs-4">
How would I accomplish this without having unnecessary and weird line-breaks throughout the page?
Level 55
@pmall it does because not all are "cleared" so it appears as if there are gaps. I know Bootstrap alone isn't capable of doing it, but is there a simple JavaScript code or jQuery snippet that can check for this and swap out (so to speak) the array_chunk method?
Level 56
@mstnorris can you rephrase ? i didn't understand anything :D
Level 55
Ahh sorry, you said
not sure it really matters to change the number of user per lines
My comment was referring to that, saying that it does matter as some of the blocks aren't cleared. An example is this, a screenshot from Jeffrey's video.
I hope that makes sense.
Level 56
It is normal if you have 5 items and col-xs-4. It sums up to 20 whereas the grid is 12 columns.
What I say is you cannot update the number of items per lines (argument of array_chunk) according to the viewport size and that it doesn't matter. Put a constant number of column and if it becomes too small bootstrap will stack them on one row.
What I suggest is col-md-4 with three items per line. Then when the viewport become too small (xs) it will stack them in one column which is perfect for a phone.
Level 8
@mstnorris To fix the problem on your screenshot, where the column are "shifted" to the right because one column has more content than the others, take a look at this jQuery plugin
1 like
Please or to participate in this conversation.