问题
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?
回答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?
来源:https://stackoverflow.com/questions/15120444/bootstrap-wordpress-theme-dev-how-to-use-wp-loop-to-generate-span6-in-a-span12