使用twitter引导程序布局动态列插入

Question

I am trying to show elements in a responsive structure based in 4 columns like this:

+------------------------ row ------------------------+

[--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--]

+------------------------ row ------------------------+

[--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--]

So I proceed to iterate the items:

<div class="row">
    <?php foreach ($items as $i): ?>
        <div class="col-lg-3">
            <?php echo $i->getName(); ?>
        </div>
    <?php endforeach; ?>
</div>

The code above will work for 4 items or less because twitter bootstrap grid systems (I think so) is based on 12 cols per row. I want to avoid this:

+------------------------ row ------------------------+

[--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--] 
[--col-*-3--] ...

+------------------------ row ------------------------+

[--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--] 

So, some people could say "chunk the array or use a flag to track if row is fill". But I want to avoid these operations in the html file. My question is, how can I deal with this design keeping four columns structure without broke responsive layout? Thank you in advance

Answer 1

I don't think that this will break your layout. Your solution should work, i've tried something similar. Maybe it's the .col-lg that breaks your solution for the smaller screen? Here an example with .col-xs. Do you try to specify the width of the col for every screen resolution?

 ...
<div class="col-lg-3 col-md-3 col-xs-3"> 
 ...
</div>
 ...