Bootstrap Wordpress theme dev - How to use WP loop to generate span6 in a span12 layout

Question

I'm currently working on a wp theme project and i am trying implement the loop on a class = "span6" in a 12 grid layout, such that it will generate a 2 col magazine grid structure of all my wp post. but the different span six wont align properly, only the first two aligned well. in a static page, i would normally implement the grid layout like so:

<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
...and so on

however, since the famous wp loop will only need one span6 i cant do this method.

what can i do to make the other span6 generated align properly?

i noticed the problem came from the `.row-fluid` left margin, i also checked a this, this and many more... but none has answered my question with respect to generating span6 in a wp loop

this is what my page looks like:

<div class="span8">
   <?php if(have_posts()): while(have_posts()): the_post();?>
   <article class="span6">
       <div>
         //content goes in here
       </div>
    </article>
    <?php endwhile; else: ?>
    <p><h3>Sorry, No Post Available.</h3></p>
    <?php endif; ?>
</div>
<div class="span4">
 <?php get_sidebar()?>
</div>

my current output looks like this `enter code here`

but what i really want is some thing like this:
`enter code here`

Any help please?

Answer 1

What I usually do in a situation like this is using a $counter variable. Place this after your the_post();

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<?php
    //echo post here
    the_title();
    the_content();
?>

</div> <!-- close .post div -->

<?php
    $counter++;
    if ($counter % 2 == 0) {
    echo '<div style="clear:both;"></div>';
    }
?>


<?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

The CSS you'd use for the code above would be:

.post{
    float:left;
    width:300px; /* width of the post */
}

I assume that's what you're looking for?