Bootstrap 垂直对齐问题

Question

基本上我追求的是明星和流派，排在 post 的底部（与 poster 的底部一致）。如您所见，我尝试使用 align-self-end 但没有成功。

我正在专门寻找 Bootstrap v4 解决方案。我确定还有其他方法可以通过添加自定义 CSS 来实现，但我正在努力保持它的纯净 bootstrap.

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

在此先感谢您的帮助。

Answer 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>

Bootstrap 垂直对齐问题

Bootstrap Vertical align Issue

vertical-alignment

twitter-bootstrap

bootstrap-4