时间戳

首页 > 解决方案 > 如何在没有绝对位置的情况下将我的（引导）元素带到列的底部？

css - 如何在没有绝对位置的情况下将我的（引导）元素带到列的底部？

问题描述

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

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

我试过使用flex，但我不确定如何在这里应用它。Position absolute导致手机出现min-height问题。

这是一bootstrap排，HTML里面有 3 个这样的元素......

.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>

标签： csstwitter-bootstrapbootstrap-4position

解决方案

父母（对我来说是卡片主体）应该有display : flex......在里面，你可以让mt-auto类自动设置margin-top......

下面的代码片段来自我不久前做的代码，它可以帮助你的情况

.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>

推荐阅读