How do you list out content using the grid?

[sciascia]

Hi There,

When using the grid to list out content (e.g. an article image, text, button using a .span3) it seems like a new .row div is required every fourth article - is that correct?

Cheers

[MGaetan89]

Hello,

That's right, you have to wrap your .span3 in a .row each time a new row has to be created.

[barryvdh]

No it is not. When you put your .row in your .container, you can place 4 .span3 next to each other, without adding a different .row; http://jsfiddle.net/2nY89/
But this is not a place for support, use the mailinglist instead.

[simskij]

@barryvdh - @MGaetan89 's response is correct. If each article consists of a span3, each row may only have contain 4 articles. It seems like that's what you're saying aswell, even if you start your post with "No". :-)

span3*4=span12=row, just as OP said.

[barryvdh]

Yes, you can fit 4_span3 in a span12. But when you have more then 4_span3, you don't need to make a new .row div, they will align correctly by just adding more .span3 divs (see my jsfiddle)
(But I'm not sure if that is what the OP means)

[simskij]

Sorry, seems You're right. You learn something new every day! :-)

[sciascia]

Thanks guys, but that jsfiddle doesn't exhibit the problem I'm seeing - maybe because of the nesting I'm using? My page looks like this:

.container
.row
.span8
.row-fluid
.span3
.span3
.span3
.span3

The forth span3 goes onto a new line but doesn't align with the first - it's about 25px to far to the right unless I wrap it in another row

[barryvdh]

But why do you use .row-fluid inside a fixed row? And I think you mean .span9 instead of .span8 (3x span3 = span9)?
Just use .row instead of .row-fluid; http://jsfiddle.net/2nY89/2/
Or use .row-fluid, then the .span3 is indeed 1/4th of the .span8, but you don't need the container; http://jsfiddle.net/2nY89/3/ But then you DO need to create different .row-fluid div's, with only 4 spans
Probably the same is issue #3494

[sciascia]

The CMS we use is very flexible and the .row-fluid class means that when we apply a 4 column layout to a block, we get 4 columns if the page template is full width (.span12) or contains a sidebar (.span8) - it actually works rather well. But I now see that I'm using Bootstrap they way I used Foundation - so probably in a way it wasn't meant to be used?

[barryvdh]

Well, according to the issue I referenced, it should be working, but it isn't, so it is a issue, but not sure if there is a fix soon..
(Not that I think of it, the way you mix it, is actually pretty logical, but that wasn't clear in the OP)

The issue (#3493) does give some options you can try (just use php to create the rows, use jquery, use nth-child etc)

[mdo]

Please see the docs regarding how to use the grid. Elements should be siblings and be contained within a .row.