有一張卡片沒(méi)有和旁邊的卡片完全對(duì)齊的圖像我一直在嘗試對(duì)齊兩張水平的卡片，這樣圖像的底部就對(duì)齊了。這是我當(dāng)前的html代碼:

<div class="container">
    <div class="row">
      <div class="col">
        <div class="card w-100 d-flex flex-column">
          <div class="row">
            <div class="col">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                <hr> 
                <p> This is some text and more text and also some more text  </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col">
              <img class="img-fluid w-100 h-100" src="images/airplane.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card w-100 d-flex flex-column">
          <div class="row">
            <div class="col">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                <hr> 
                <p> This is some text and more text and also some more text and more and more
                 </p> 

                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col">
              <img class="img-fluid w-100 h-100" src="images/Agility.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>`

我的css代碼:

.card-block {
                  font-size: 1.2em;
                  position: relative;
                  padding: 1em;
                  border-top: 1px solid rgba(34, 36, 38, .1);
                  box-shadow: none;
                }

                .card {
                  font-size: 1em;
                  overflow: hidden;
                  padding: 5;
                  border-radius: .27rem;
                  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 1 1px #d4d4d5;
                  margin-top: 25px;
                }

                .img {
                  object-fit: cover;
                  height: 100%;
                  width: 100%;
                }

它現(xiàn)在的樣子已經(jīng)貼出來(lái)了。我的目標(biāo)是讓飛機(jī)與第二張卡片圖像的底部對(duì)齊。為此，我一直使用Bootstrap版本4。

我試過(guò)用這個(gè)代碼:

<div class="container">
    <div class="row">
      <div class="col-sm-6 d-flex align-items-stretch">
        <div class="card">
          <div class="row">
            <div class="col-sm-6 d-flex align-items-stretch">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                  <hr> 
                <p> This is some text and more text and also some more text  </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col-sm-6 d-flex align-items-stretch">
              <img class="img-fluid d-flex w-100" src="images/airplane.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
    <div class="col-sm-6 d-flex align-items-stretch">
        <div class="card">
          <div class="row">
            <div class="col-sm-6 d-flex align-items-stretch">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                  <hr> 
                <p> This is some text and more text and also some more text and more and more </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col-sm-6 d-flex align-items-stretch">
              <img class="img-fluid d-flex w-100" src="images/Agility.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

卡片底部在這里對(duì)齊得很好，但是第一張卡片中的圖像沒(méi)有完全向下到底部。圖像:平面未與第二個(gè)圖像的底部對(duì)齊