wordpress - 使用 Bulma 框架的自定义 WordPress 主题，博客卡未正确对齐

Question

我正在使用 Bulma CSS 框架制作 WordPress 主题。到目前为止，它运行良好，只是我的博客卡显示不正确。

我需要它们在一行上垂直对齐，它们在我的练习 html 文件中做得很好，但是将它移到 WordPress 上它们彼此重叠。

接受建议，仍在学习 WordPress 的工作原理

目前在 MAMP Pro 服务器上对此进行测试

这是我的代码：

    <?php 

    $args = array(
    'post_type' => 'post',
    //'posts_per_page' => 2, 
    );

    $blogposts = new WP_Query($args);

    while ($blogposts->have_posts()){
        $blogposts->the_post();

    ?>
    <section>
        <div class="container">
            <div class="columns is-multiline is-variable is-4">
                <div class="column is-4">
                    <div class="card">
                        <div class="card-image"><!--Image container-->
                            <figure class="image"><!--The Image-->
                                <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>"/>
                            </figure>
                        </div><!--Close image container-->
                        <div class="card-content"><!--Container for blog card text-->
                            <div class="content"><!--blog title, excerpt and link to full article-->
                                <h3 class="post_title"><?php the_title(); ?></h3>
                                <p class="excerpt"><?php the_excerpt(); ?></p>
                                <a class="button" href="<?php the_permalink();?>">Read More</a>     
                            </div><!--close content-->
                        </div><!--Close card-content-->
                    </div><!--Close card-->
                </div><!--Close column -->
            </div><!--Close columns-->
        </div>
    </section>

    <?php } ?><!--close while loop-->

标签： wordpressframeworkscontent-management-systemthemesbulma

Answer 1

设法通过移动来解决它

<?php 

$args = array(
'post_type' => 'post',
//'posts_per_page' => 2, 
);

$blogposts = new WP_Query($args);

while ($blogposts->have_posts()){
    $blogposts->the_post();

?>

成列是-多行...