Bootstrap垂直对齐问题答案

【问题标题】：Bootstrap Vertical align IssueBootstrap垂直对齐问题
【发布时间】：2018-10-29 10:00:49
【问题描述】：

基本上，我在帖子底部（与海报底部一致）关注明星和流派。如您所见，我尝试使用align-self-end，但没有成功。

我正在专门寻找 Bootstrap v4 解决方案。我确信还有其他方法可以通过添加自定义 CSS 来实现，但我试图让它保持纯引导。

https://www.codeply.com/go/bCChoF427L

提前感谢您的帮助。

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 vertical-alignment

【解决方案1】：

在最后一行的col-md-8 div 和flex-grow-1 上使用d-flex 和flex-column 类。请记住，这仅适用于最新版本的 Bootstrap-4。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-8 offset-sm-2">
  <div class="card card-body">
    <div class="row">
      <div class="col-md-4">
        <img class="show-poster rounded w-100" src="https://nebula.wsimg.com/obj/NzQ3QUYxQzZBNzE4NjNFRTc1MTU6ODEyOTQ0ZTI1OTA3ZjZlMDcwZTkxNTAwY2YzZWUyNzA6Ojo6OjA=" alt="Superman Show Poster"></div>
      <div class="col-md-8 d-flex flex-column">
        <div class="row align-items-bottom">
          <div class="col-md-8">
            <h1>Superman</h1>
          </div>
          <div class="col-md-4 text-right">
            <h6>2012-17 (Ended)</h6><small class="text-muted">126/137 Episodes</small></div>
        </div>
        <div>
          <blockquote>Brian Finch him a criminal's worst nightmare and the greatest asset the Bureau has ever possessed.</blockquote>
        </div>


        <div class="row align-items-bottom flex-grow-1">
          <div class="col align-self-end"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half"></i><br>7.8/10</div>
          <div class="col align-self-end">TV-14<br>CBS</div>
          <div class="col align-self-end text-right"><i class="fa fa-heart"></i><i class="fa fa-star"></i><i class="fa fa-music"></i><br>Family, Blah, blah</div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：