Bootstrap v4垂直对齐问题：如何将星级与分类对齐至帖子底部？

嘿，我来帮你解决这个Bootstrap布局问题！

你之前用align-self-end没达到预期效果，大概率是因为父容器没有设置合适的Flex布局和高度。别担心，用纯Bootstrap v4的类就能搞定，完全不用自定义CSS，核心思路是利用Flexbox的自动margin特性。

解决方案步骤： #

1. 给你的帖子卡片容器添加h-100 d-flex flex-column类，这样卡片会成为一个垂直方向的Flex容器，并且占满父容器的可用高度。
2. 把需要固定在底部的星级评分和内容分类放在一个单独的容器里，给这个容器加上mt-auto类——在垂直Flex布局中，mt-auto会自动把元素推到容器的底部，完美和海报底部齐平。

完整代码示例： #

<div class="col-md-4 mb-4">
  <div class="card h-100 d-flex flex-column">
    <!-- 海报图片 -->
    <img src="your-poster-image.jpg" class="card-img-top" alt="Poster">
    <!-- 帖子内容区域 -->
    <div class="card-body">
      <h5 class="card-title">帖子标题</h5>
      <p class="card-text">这里是帖子的正文内容，长度可以随意变化，不会影响底部元素的位置</p>
    </div>
    <!-- 底部对齐的星级和分类 -->
    <div class="mt-auto px-3 pb-3">
      <div class="d-inline-block mr-2">★★★★☆</div>
      <span class="badge badge-primary">科技分类</span>
    </div>
  </div>
</div>

为什么这个方法有效？ #

• h-100确保卡片高度占满父容器，避免因内容长短导致卡片高度不一；
• d-flex flex-column把卡片变成垂直Flex容器，让内部元素可以利用Flex布局规则排列；
• mt-auto是Bootstrap自带的类，利用Flexbox的margin-top: auto特性，自动将元素推到容器底部，不管上面的内容有多长，都能保持和海报底部齐平。

这个方案完全符合你“纯Bootstrap v4、无自定义CSS”的要求，你可以直接替换到你的代码里试试！

内容的提问来源于stack exchange，提问作者Mark