Foundation 和 Wordpress 空格

Question

有人知道我在使用基础框架的 wordpress 中进入 while 循环的空格吗？

    <div class="large-8 columns">

    <?php query_posts(array('category_name' => 'revista', 'paged' => get_query_var('paged'), 'posts_per_page' => 9 )); ?>

    <?php while ( have_posts() ) : the_post(); ?>

        <article class="boletin large-4 columns" style="min-height:1px;">       

            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

            <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>   

        </article>              

    <?php endwhile; ?>

    </div><!-- /large-8 -->

    <?php get_sidebar(); ?>

</div>

这是页面（请使用CTRL + F5查看最新版本）

http://www.aoa.cl/revistas/

Answer 1

发生这种情况的原因是您的图块高度不相等。您可以使用 Foundation Equalizer 来解决这个问题。并留下密码。我还是会把大的改成小的

<article class="small-12 medium-6 large-4 columns">

以获得更好的响应结果。 Foundation 是移动优先的。首先为小屏幕编写代码，较大的设备将继承这些样式。根据需要针对更大的屏幕进行自定义。

如果您希望在移动设备和桌面设备上都只有三列，请执行以下操作：我每三行添加一行。也由大变小（大屏继承小比小屏继承大好很多）。

<div class="small-8 columns">
<?php $count=0;?>
<?php query_posts(array('category_name' => 'revista', 'paged' => get_query_var('paged'), 'posts_per_page' => 9 )); ?>

<?php while ( have_posts() ) : the_post(); ?>
    <?php if ($count % 3 == 0): ?>
    <div class="row">
    <?php end_if; ?>
        <article class="boletin small-4 columns" style="min-height:1px;">       
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

            <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>   

        </article> 
    <?php if ($count % 3 == 2): ?>
    </div>
    <?php end_if; ?>  
    <?php $count++; ?>           

<?php endwhile; ?>

</div><!-- /small-8 -->

<?php get_sidebar(); ?>

Foundation 和 Wordpress 空格

Foundation and Wordpress blank spaces

wordpress

zurb-foundation