html - bootstrap 4 中的全空间图像

Question

我想要这样的横幅:

在手机端显示时

在桌面显示时

为此我尝试了:

.card-body {
  display: flex;
}

@media(min-width:768px) {
  .card-title {
    font-size: 3vw;
    word-break: break-all;
  }
}

@media(max-width:767px) {
  .card-title {
    font-size: 8.5vw;
    word-break: break-all;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="shadow card col-md-3 ml-4 mt-3 mb-3 mr-4" style="background-color: #F0E78C">
  <div class="row">
    <div class="card-body col-12 border p-0">
      <img src="https://i.imgur.com/ZyROdEa.png" width="90">
      <h5 class="card-title float-right">9999999999</h5>
    </div>
    <div class="card-body col-12 border p-0">
      <a href="" class="btn btn-block" style="background-color: #00BFFF; color: white;">Get Details</a>
    </div>
  </div>
</div>

但是在上面的代码中，文本是左对齐的，但是我使用的是float-right。

Answer 1

使用 margin-left: auto

.card-body {
  display: flex;;
}

.card-title {
  margin-left: auto;
}

h5 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@media(min-width:768px) {
  .card-title {
    font-size: 3vw;
    word-break: break-all;
  }
}

@media(max-width:767px) {
  .card-title {
    font-size: 8.5vw;
    word-break: break-all;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="shadow card col-md-3 ml-4 mt-3 mb-3 mr-4" style="background-color: #F0E78C">
  <div class="row">
    <div class="card-body col-12 border p-0">
      <img src="https://i.imgur.com/ZyROdEa.png" width="90">
      <h5 class="card-title float-right">99999952341624624629999</h5>
    </div>
    <div class="card-body col-12 border p-0">
      <a href="" class="btn btn-block" style="background-color: #00BFFF; color: white;">Get Details</a>
    </div>
  </div>
</div>