使用twitter引导程序布局动态列插入
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
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>
...