0

I want blog posts to populate the homepage in rows of three. The first three blost posts show up fine, but afterwards the blog posts are off. I would like for each post to line up vertically as well as horizontally. You can see an example here.

Do I need to add a row for every three posts? I'm not sure how I could code that in?

<div class="row-fluid">


<?php $cat_id = 10; //the certain category ID
$latest_cat_post = new WP_Query( array('posts_per_page' => -1, 'orderby' => rand, 'category__in' => array($cat_id)));
if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post();  ?>


<div class="span4" style="text-align:center;background-color:#999999;margin-bottom:20px;">

<a class="" href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post_id, $size=0, $attr ); ?></a>
<span><a style="color:#5a5a5a;" class="" href="<?php the_permalink() ?>"><h5 class="lead"><?php the_title(); ?></h5></a>
</span>


</div>


<?php endwhile; endif; ?>



</div><!--row-fluid-->
4

3 回答 3

0

弄清楚了！

<?php $cat_id = 10; //the certain category ID

    $latest_cat_post = new WP_Query( array('posts_per_page' => -1, 'orderby' => rand, 'category__in' => array($cat_id)));
    if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post();  
 $open = !($count%3) ? '<div class="threeacross">' : '';
    $close = !($count%3) && $count ? '</div>' : '';
    echo $close.$open;

?>


<div class="span4" style="text-align:center;background-color:#999999;margin-bottom:20px;">

<a class="" href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post_id, $size=0, $attr ); ?></a>
<span><a style="color:#5a5a5a;" class="" href="<?php the_permalink() ?>"><h5 class="lead"><?php the_title(); ?></h5></a>
</span>


</div>


<?php endwhile; endif; ?>
<?php echo $count ? '</div>' : ''; ?>
于 2013-05-28T20:04:38.020 回答
0

你只需要覆盖你span4班级的左边距。

通过添加带有（或任何您想要的）<style>标签，行均匀对齐。margin-left:20px

这是一个工作示例。

于 2013-05-28T18:51:46.510 回答
0

关于网格系统的文档指出：

默认的 Bootstrap 网格系统使用 12 列 [...] 由于这是一个 12 列的网格，每个.span* 跨越这 12 列中的许多列，并且每行应始终加到 12（或列数在父母）。

这意味着您的 HTML 应该更像：

<div class="row-fluid" style="">
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
</div>
<div class="row-fluid" style="">
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
</div>
于 2013-05-28T19:04:51.737 回答