Question

刚刚开始使用Bootstrap 4在WordPress中创建一个网站，而现在我已经困扰了好几天。

我正在尝试垂直对齐网站上“相关帖子”部分的更多按钮。我想让“阅读更多”按钮自动与最长的字幕文本对齐。我已经尝试了相对/绝对的多种方法，但似乎无法使其正常工作。

这是我当前的代码：

<div class="row">
    <?php $cat = new WP_Query( 'cat=6&posts_per_page=3' ); ?>
    <?php while($cat->have_posts()) : $cat->the_post(); ?>
        <div class="col-xs-12 col-md-4 readmore">
            <img class="w-100" src="<?php the_post_thumbnail_url(); ?>">
            <div class="col-12" style="margin-top:15px;">
                <h2 class="h6 text-uppercase text-center text-nowrap"><strong><?php the_title(); ?></strong></h2>
                <p><?php the_content(); ?></p>
                <p><?php //the_excerpt(); ?></p>
            </div>
            <div class="col-6 mx-auto" style="bottom: 10px;margin-bottom: 20px">
                <a href="<?php the_permalink(); ?>" class="d-block btn btn-secondary btn-sm">Read More</a>
            </div>    
        </div>
    <?php endwhile; ?> 
</div>
<?php wp_reset_postdata(); ?>

这是当前的样子：

让事情变得更加困难的是，理想情况下，它仍然应该响应。因此，在较小的屏幕上，按钮应直接位于字幕之后，如下所示：

希望很清楚，问题出在哪里，希望有人能分享他们的想法。预先感谢！

Answer 1

您将需要指定一个div，其中所有子元素的高度均相等。我相信响应式设计也有一些功能。查看这篇文章：

How do I keep two side-by-side divs the same height?

答案下方的最高注释表明：如果您正在开发响应式设计，并且希望第二个div在较小的屏幕中显示，则需要将.row设置为display：block;在您的媒体查询中。

我现在将为您进行一些测试，并发布代码段

Answer 2

您不需要所有子元素最初都具有相同的高度。您可以使用flexbox获得所需的结果。

这里是一个指向解决方案的代码笔的链接，下面有一个解释。 https://codepen.io/sugarbuzzdesigns/pen/ZjwQZb

创建一个包含所有帖子的容器。应将其设置为显示：flex。将弯曲方向设置为列，这样我们就可以在更大的屏幕上使用媒体查询将其设置为行。
为每个帖子创建容器。这些帖子是我们刚刚创建的容器中的弹性项目
将图片，标题和内容包装在一个div中，以便可以与“更多阅读”按钮均匀地隔开
现在您可以将每个帖子设置为flex：1，以便它们占据相等的空间。接下来，您可以将每个帖子设置为flex-direction：column和justify-content：space-between。

HTML

<div class="container">
  <div class="blog-post">
    <div>
      <h3>Heading Here</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae maiores ullam possimus non corporis. Animi, sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis expedita laudantium ut earum sint, numquam adipisci autem cupiditate dolorem aspernatur illo laboriosam, dolores quis? Perspiciatis debitis nesciunt corporis dicta eveniet!<p>
    </div>
    <a href="#">Read More</a>
  </div>
  <div class="blog-post">
    <div>
      <h3>Heading Here</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae.<p>
    </div>
    <a href="#">Read More</a>
  </div>  
    <div class="blog-post">
    <div>
      <h3>Heading Here</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae maiores ullam possimus non corporis. Animi, sit.<p>
    </div>
    <a href="#">Read More</a>
  </div>  
</div>

CSS

.container {
    display: flex;
}

@media (min-width: 600px) {
  .container {
     flex-direction: row;
  }
}

.blog-post {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

将标题下方的按钮垂直对齐，以使三个标题的最长文本

2 个答案: