Twitter-bootstrap-3和Wordpress帖子显示

Question

Scratching my head over this one but it is probably simple? I cannot seem to figure it out. So I am showing blog posts using a custom theme I have made with Twitter-Bootstrap-3 but having a problem showing my posts in a grid.

so i have a latest post at the top which is fine. but below I am aiming to show a grid of posts so when a new one is added it naturally goes to the top, I also have a side bar on the right. so the grid of posts should be 3 across and then create a new row and so on. My posts are just creating new rows now matter if i set them to be say col-md-3?

    <?php endwhile; wp_reset_query(); ?>

            <h2 class="blog-title">Past Posts</h2>


             <div class = "col-md-3">

                <?php while(have_posts()) : the_post(); ?>
                <?php the_post_thumbnail( 'medium', $attr ); ?> 
                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <p><?php the_excerpt(); ?></p>
                <p class="text-muted">Posted by <?php the_author(); ?> on <?php the_time('F jS, Y'); ?></p>
                <p><?php comments_number( 'no responses', '1 response', '% responses' ); ?>.</p>
                 <hr>
                <?php endwhile; wp_reset_query(); ?>

From researching I guessing there is a requirement for a loop of some sort? I am unsure form my code where to begin with that...

Answer 1

probably because you need to wrap each post is s col-md-3, not all of the in a single one?

So have a look at this...

<h2 class="blog-title">Past Posts</h2>

<?php while(have_posts()) : the_post(); ?>
<div class = "col-md-3">
    <?php the_post_thumbnail( 'medium', $attr ); ?> 
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <p><?php the_excerpt(); ?></p>
    <p class="text-muted">Posted by <?php the_author(); ?> on <?php the_time('F jS, Y'); ?></p>
    <p><?php comments_number( 'no responses', '1 response', '% responses' ); ?>.</p>
    <hr>
</div>
<?php endwhile; wp_reset_query(); ?