I've been trying to stack blocks using the Bootstrap, but it looks like it only stacks three / four blocks and as soon as it jumps to a new row they break.
How i get blocks stacking nice and clean using the bootstrap.
Been a couple of projects since i used boot strap but if i remember rightly bootstrap's grid doesn't behave the way you think it does. the dynamic grid has a basic structure roughly like this.
One row, a standard block div with a max-width, inside that a number of div's called columns, these are also block div's but with a width percentage set to correspond to how many columns, as the window decreases insize (once below the row's max-width) these column widths actually decrease in pixel size (same percentage though, now just of a narrower row) till some point at which a media query kicks in and column's regardless of how many columns they represent are set to 100% width and thus stack inline vertically.
Basically it's not going to work using Bootstraps Scaffolding Grid System as easily as you might think.
That's not to say that you can't create a simple grid inside your own CSS and use that. You just need to create separate classes to distinguish them from the TBS ones.
Hi,
I've been trying to stack blocks using the Bootstrap, but it looks like it only stacks three / four blocks and as soon as it jumps to a new row they break.
How i get blocks stacking nice and clean using the bootstrap.
i want to achieve this effect.
http://codepen.io/amyth91/pen/wcAzj
Considering the Outer to be "row-fluid" and each block be "span3".
Thanks
regards
My guess is that you aren't splitting each 'set ' of 4 blocks as new rows.
Been a couple of projects since i used boot strap but if i remember rightly bootstrap's grid doesn't behave the way you think it does. the dynamic grid has a basic structure roughly like this.
One row, a standard block div with a max-width, inside that a number of div's called columns, these are also block div's but with a width percentage set to correspond to how many columns, as the window decreases insize (once below the row's max-width) these column widths actually decrease in pixel size (same percentage though, now just of a narrower row) till some point at which a media query kicks in and column's regardless of how many columns they represent are set to 100% width and thus stack inline vertically.
Basically it's not going to work using Bootstraps Scaffolding Grid System as easily as you might think.
That's not to say that you can't create a simple grid inside your own CSS and use that. You just need to create separate classes to distinguish them from the TBS ones.
http://codepen.io/joe/pen/yfmrp