css - 如何在没有绝对位置的情况下将我的( Bootstrap )元素带到列的底部？

Question

我正在处理 3 列，底部有图标。您可以在本网站底部看到它们:https://matiny.github.io/

我想将图标直接带到每个灰色框的底部，而不使用 position absolute(这是我目前正在使用的)。但是，如果没有 absolute，我不知道如何将所有 3 个都推到底部。默认情况下，它们都依赖于父级的 height。

我试过使用flex，但我不确定如何在这里应用它。具有 min-height 的 Position absolute 在移动设备上会导致问题。

这是一个 bootstrap 行，里面有 3 个 HTML 元素...

.gallery {
  padding: 2.5rem 0;
}

.gallery h1 {
  font-size: 3rem;
  padding: 1.5% 0;
}

.gallery .app-box {
  position: relative;
  min-height: 31rem;
  background-color: #ebedf0;
}

.gallery .app-box img {
  width: 100%;
}

.gallery .app-box .caption {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gallery .app-box .name,
.gallery .app-box .description {
  padding: 1rem;
  color: #0f1a30;
  font-weight: 700;
}

.gallery .app-box .name {
  font-size: 1.5rem;
  padding-bottom: 0;
}

.gallery .app-box .description {
  opacity: 0.5;
}

.gallery .app-box .icons {
  height: 100%;
  width: 100%;
  opacity: 0.5;
  padding-bottom: 1rem;
}

.gallery .app-box .icons img {
  width: 15%;
  margin: 0 0.25rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="gallery">
  <div class="col-md-4 col-12">
    <a href="https://matiny.github.io/gta6/">
      <figure class="app-box">
        <img src="https://matiny.github.io/images/jpgs/gallery-gta.jpg" alt="">
        <figcaption class="name">
          GTA UI UPGRADES
        </figcaption>
        <div class="caption">
          <figcaption class="description">GTA Online is very detailed, but the details are presented in a confusing way. <br> I came up with various menus which are simpler to use, while maintaining the same complex functions.
          </figcaption>
          <div class="icons">
            <img src="https://matiny.github.io/images/svgs/icon-js.svg" alt="">
            <img src="https://matiny.github.io/images/svgs/icon-react.svg" alt="">
            <img src="https://matiny.github.io/images/svgs/icon-sass.svg" alt="">
          </div>
        </div>

      </figure>
    </a>
  </div>
</section>

Answer 1

父级(对我来说是卡体)应该有 display : flex ...并且在里面，你可以有 mt-auto 类来设置边距-自动顶...

下面的片段来 self 不久前做的一段代码，它可以帮助你

.card-body {
  display: flex;
  flex-direction: column;
  text-align: center;
}

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

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-4 d-flex">

      <div class="card">
        <img class="card-img-top img-fluid" src="http://via.placeholder.com/400x300" alt="Card image">
        <div class="card-body d-flex flex-colum">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <a href="#" class="btn customBtn mt-auto">Read More</a>
        </div>
      </div>

    </div>
    <div class="col-12 col-sm-4 d-flex">

      <div class="card">
        <img class="card-img-top img-fluid" src="http://via.placeholder.com/400x300" alt="Card image">
        <div class="card-body d-flex flex-colum">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn customBtn mt-auto">Read More</a>
        </div>
      </div>

    </div>
    <div class="col-12 col-sm-4 d-flex">

      <div class="card">
        <img class="card-img-top img-fluid" src="http://via.placeholder.com/400x300" alt="Card image">
        <div class="card-body d-flex flex-colum text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
          <a href="#" class="btn customBtn mt-auto">Read More</a>
        </div>
      </div>

    </div>
  </div>
</div>