我正在从头开始创建自己的自定义主题,遇到了一些麻烦。在博客页面上,每次显示新的帖子时,它都会比上一篇小。这是因为我将博客文章的宽度设置为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%。这是小提琴