Bootstrap continual thumbnail list into grid - css

Question

I want to make a long list of elements, images for example that will be added into the grid which width is span12 and every elements width should be span3, that makes 4 elements in 1 row.
The problem is, when I list all the elements or I make a php function that lists them Boostrap thinks I want to put it in one row, but I don't. I want to make a new row every 4 elements or so... I want to be able to add as many <li> as I want and not worry about where another row should be.. What should I do ?
This is what happened to me, the 5th image has wrong margin on the left side. I want to make it in the same position as images in the first row.
Screenshot here
I use this php logic to echo out pictures
$dir = "../img";
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if (preg_match("/.jpg/", $file)) {
echo "<li class='span3'>
<a href='$dir/$file' class='thumbnail'>
<img src='$dir/$file'>
</a>
</li>
";
}
}
closedir($dh);
}
}
And I have no idea on how to post a new row each 4th picture or so.
Row is marked as <div class='row-fluid'>

Answer 1

That's a common problem, and I think there's no elegant solution. Consider one of these approachings.
Solution 1 Review your iteration logic
If refactoring your PHP logic is an option, try to render a row each 4 elements (I can't suggest an specific code without viewing your current logic).
EDIT
The code for a while loop could be as follows:
<?php
$count = 1;
echo '<div class="row">';
while (your_condition) {
echo '<div class="span3">your_content</div>';
if ($count % 4 == 0) {
echo '</div>';
echo '<div class="row">';
}
$count++;
}
echo '</div>';
Solution 2 Hack the fifth element's margin
Correct the margin-left of the affected elements, so you don't need to respect the native Bootstrap markup.
.thumbnails .span4:nth-child(4n+1) {
margin-left: 0;
}
Unfortunately, that code is not compatible with Internet Explorer, so maybe you'll have to find a JavaScript or jQuery solution.