CODEWITHSUNDEEP
phpcsstwitter-bootstrap
Laurence
Laurence

Reputation: 60048

Use twitter bootstrap span in foreach

How do you use the twitter spans within a foreach loop?

This is my code:

<div class="row-fluid">
    <?foreach ($photos as $photo) { ?>
        <div class="span4">
            stuff
        </div>
    <? }?>
</div>

But the problem is the 4th output (which is now on the 2nd row) is off center - due to the margin/padding to the left.

I'm trying to avoid having to add a counter and manually insert a new 'row' after each 3rd loop - surely there is a cleaner way via bootstrap/css?

Upvotes: 1

Views: 290

Answers (1)

Chad
Chad

Reputation: 5418

By using CSS3's nth-child selector, you can target elements using math. 

.span4:nth-child(3n+1) {
    /* CSS here */
}

The 3n+1 is a math function where n is incrementing by 1, so it would target elements #1 (3x0 + 1), #4 (3x1 + 1), #7 (3x2 + 1), etc.

Upvotes: 3

Related Questions