Bootstrap 图像卡文本覆盖

Posted 2023-03-05

【中文标题】Bootstrap 图像卡文本覆盖

【英文标题】：Bootstrap image card text overlay

【发布时间】：2020-12-13 22:16:35

【问题描述】：

无法将卡片页脚设置为预期输出

预期输出：

我的代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-3">
  <div class="card">
    <img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" >
    <div class="card-img-overlay">
      <h5 class="card-title"></h5>
    </div>
    <div class="card-footer text-center">
      <h6>
      Africa
      </h6>
      <h4>
      Kenya
      </h4>
    </div>
  </div>
  
  
</div>

jsfiddle: https://jsfiddle.net/sidh_41/p8sdfy7u/2/

【参考方案1】：

.card-footer:last-child 
    border-radius: 0!important;


.card-footer 
    padding: 0!important;
    background-color: unset!important;
    border-top: unset!important;


.text-center 
    color: #fff;


.card-img-overlay 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;   

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-3">
  <div class="card">
    <img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" >
    <div class="card-img-overlay">
      <h5 class="card-title"></h5>
      <div class="card-footer text-center">
      <h6>
      Africa
      </h6>
      <h4>
      Kenya
      </h4>
    </div>
    </div>
  </div>
  
  
</div>

【参考方案2】：

<div class="row">
<div class="col-md-3">
  <div class="card">
    <img class="card-img" src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" >
    <div class="card-img-overlay">
      <h5 class="card-title"></h5>
      <div class="card-footer text-center">
        <h6>
          Africa
        </h6>
        <h4>
          Kenya
        </h4>
      </div>
    </div>
  </div>
</div></div>

我认为您需要在卡片周围添加另一个 div。这个 div 需要有类 row