Question

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3">
  <div class="card bg-dark text-white">
    <img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
    <div class="card-img-overlay">
      <h5 class="card-title">Title</h5>
      <h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
      <div class="align-self-end">Text I want at bottom</div>
    </div>
  </div>
</div>

我无法通过将此类align-self-end应用于图像底部来获取最后一个div中的文本。我知道flex已经应用于.card-img-overlay div的列方向，那为什么我无法将div放到图像的底部？

Answer 1

card-img-overlay div不是display:flex。

您可以通过向其添加d-flex flex-column类来执行此操作，并使用mt-auto将文本推送到底部。

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

<div class="card bg-dark text-white">
       <img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
       <div class="card-img-overlay d-flex flex-column">
            <h5 class="card-title">Title</h5>
            <h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
            <div class="mt-auto">Text I want at bottom</div>
       </div>
</div>

CSS类align-self-end无法正常工作

1 个答案: