Question

我将快速讲到这一点：我正在使用_s入门主题为我的博客创建Wordpress主题。我正在使用bootstrap 4网格系统，以获得2列帖子（在主页/搜索/存档上）：左侧div内的帖子缩略图，而帖子内容（标题，摘录等）位于正确的。

我想将帖子缩略图设置为div的背景图像，我已经实现了这一点，在台式机/平板电脑上没有问题，但是在移动设备上，当缩略图位于帖子内容上方时，它不会显示，除非我为图片设置了固定的高度，否则我可以接受，但是问题是某些帖子没有帖子缩略图，因此您可以想象结果是非常残酷的，帖子上有空白而没有缩略图；

也许这是愚蠢且容易的，但是问题是：有没有办法解决这个问题？也许可以在移动设备上设置固定高度，但只能在具有缩略图的帖子上设置该高度吗？

<div class="container-fluid">
    <div class="row">
        <div class="post-thumbnail col-md-5" <?php echo 'style="background-image: url(' . get_the_post_thumbnail_url() . ')"' ?>>
        </div>

        <div class="post-content <?php echo (has_post_thumbnail())?$small:$large;?>">
        </div> <!-- post content -->
    </div> <!-- row -->
</div> <!-- container fluid -->

Answer 1

如果我对您的理解正确，也许您可以尝试这样的事情

<div class="container-fluid">
    <div class="row">
        <?php if ( have_posts() ) : while ( have_posts() ) :   the_post(); ?>
            <article>
                <div class="col-md-6">
                    <h2>
                      <a href="<?php the_permalink() ?>">
                        <?php the_title(); ?>
                      </a>
                    </h2>

                    <?php the_content(); ?>
                </div>
                <div class="col-md-6">
                    <?php if(has_post_thumbnail()) : ?>
                        <div class="post-thumbnail" style="background: url('<?php get_the_post_thumbnail_url(); ?>') center center / cover"></div>
                    <?php else : ?>
                        <div class="post-thumbnail" style="background: url('[some fixed image url]') center center / cover"></div>
                    <?php endif; ?>
                </div>
            </article>
        <?php endwhile; else: ?>
            <p>There no posts to show</p>
        <?php endif; ?>
    </div>
</div>

Wordpress循环内的Bootstrap 4网格系统

1 个答案: