Question

我正在从头开始创建自己的自定义主题，但遇到了一些麻烦。在博客页面上，每次显示新帖子时，它都会小于最后一个。这是因为我将博客文章的宽度设置为33.3％。此外，每个博客帖子都会显示在前一个博文章的右侧。如何将每个博文发布为内容区域的33.3％并且并排显示，每行3个？我正在使用wordpress函数来调用每篇博文。我只显示博客文章缩略图，当您单击缩略图时，它会将您带到帖子。所以基本上是3张图片。

[BONUS]：如何将鼠标悬停在每个博客帖子图片上，水平和垂直显示文字？

我知道这有很多要问，但我一直试图解决这个问题。一个JS小提琴或Codepen将不胜感激。

的index.php：

<?php get_header(); ?>
        <div class="blog-posts">
             <?php while (have_posts()) : the_post(); ?>
                 <div id="page-content">   
                     <a href="<?php the_permalink(); ?>">
                         <?php the_post_thumbnail(); ?>
                             <h3><?php the_title(); ?></h3>
                                 </a>   
                                     <?php endwhile; ?>   
                 </div>             
       </div>
<?php get_footer(); ?>

Answer 1

您应该使用bootstrap并执行以下操作：

<?php get_header(); ?>
        <div class="blog-posts">
             <?php while (have_posts()) : the_post(); ?>
                 <div class="col-md-4">
                     <div id="page-content">   
                         <a href="<?php the_permalink(); ?>">
                             <?php the_post_thumbnail(); ?>
                             <h3><?php the_title(); ?></h3>
                         </a>   
                     </div>
                 </div>  
             <?php endwhile; ?>           
       </div>
<?php get_footer(); ?>

小心删除width: 33.33%; CSS规则并关闭循环中的<div>标记，而不是之后。

希望有所帮助

<强> [编辑]

有关如何将列类与引导程序一起使用的详细信息，请参阅此链接：grid example basic

[编辑＃2]

你可以在没有引导程序的情况下做到这一点但是会有点困难。您必须将“display”设置为“inline-block”并设置div的宽度，并注意这些标记的继承余量。在这个例子中，我不得不将其设置为32％。这是fiddle

博客帖子Wordpress定制

1 个答案: