Question

基本上我是在明星和流派之后位于帖子的底部（与海报的底部对齐）。正如您所看到的，我尝试使用align-self-end但没有运气。

我特意寻找Bootstrap v4解决方案。我确定通过添加自定义CSS还有其他方法可以实现，但我试图保持纯粹的自举。

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

提前感谢您的帮助。

Answer 1

在最后一行的d-flex div和flex-column上使用col-md-8和flex-grow-1个类。请记住，这只适用于最新版本的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垂直对齐问题

1 个答案: