我正在从头开始创建自己的自定义主题，遇到了一些麻烦。在博客页面上，每次显示新的帖子时，它都会比上一篇小。这是因为我将博客文章的宽度设置为33.3%。此外，每条博客文章都会显示在前一条博客文章的右侧。如何使每条博客文章占内容区域的33.3%，并并排显示，每行3条？我使用wordpress功能来调用每一篇博客文章。我只显示博客文章的缩略图，当你点击缩略图时，它会带你到帖子。所以基本上是3个并排的图像。
[奖金]：如何让文本在悬停在每个博客文章图像上时水平和垂直显示？
我知道这是一个很大的要求，但我已经试着解决这个问题好几天了。JS Fiddle或Codepen将不胜感激。
Index.hp:
<?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(); ?>
您应该使用引导程序并执行以下操作：
<?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>标记，而不是之后。
希望它能帮助
[EDIT]
有关如何将列类与引导程序一起使用的更多信息，请参阅此链接：网格示例基本
[EDIT#2]
你可以在没有引导程序的情况下完成，但会有点困难。您必须将"display"设置为"inline block"，并设置div的宽度，同时注意这些标记的继承边距。在这个例子中，我不得不将它设置为32%。这是小提琴