Question

我想将链接对齐到卡片的底部中心。我尝试将类d-flex和flex-column添加到.card-body和mt-auto到链接，正如其他地方所建议的那样。注意我没有使用container或container-fluid div类（Bootstrap documentation建议没有一个用于边缘到边缘的设计）。

相关HTML（完整代码视图CodePen）：

<div class="row portfolio">

      <div class="col-sm-12">
        <h2>Portfolio</h2>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body d-flex flex-column">
            <h4 class="card-title">Project One</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
            <a href="#" class="card-link text-info mt-auto">View CodePen</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body">
            <h4 class="card-title">Project Two</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            <a href="#" class="card-link text-info">View CodePen</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body">
            <h4 class="card-title">Project Three</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
            <a href="#" class="card-link text-info">View CodePen</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body">
            <h4 class="card-title">Project Four</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            <a href="#" class="card-link text-info">View CodePen</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body">
            <h4 class="card-title">Project Five</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            <a href="#" class="card-link text-info">View CodePen</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body">
            <h4 class="card-title">Project Six</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
            <a href="#" class="card-link text-info">View CodePen</a>
          </div>
        </div>
      </div>

    </div>

Answer 1

链接位于d-flex的{{1}}和flex-column以及card-body链接的末尾。在您的CodePen上，您缺少其中一些类（example with classes）！

注意：您也可以在Bootstrap 4的official documentation上找到此示例。

要使链接居中，您可以使用mt-auto上的text-center课程。

＆＃13;

card-link

＆＃13;

Answer 2

添加此css，它将起作用

.card-body {
  display: flex;
  flex-direction: column;
}
.card-link {
   margin-top: auto;
}

codepen link

Answer 3

另一种解决方案

您可以按照以下三个步骤对齐card-body底部的链接：

将d-flex和flex-column类应用于card-body
在card-body。

div

在新的flex: 1 1 auto

div

这样做，新创建的div始终占用所有可用空间。因此，链接始终位于card-body。

＆＃13;

.flex-grow {
  flex: 1 1 auto;
}

＆＃13;

<div class="card-body d-flex flex-column">
  <div class="flex-grow">
    <h4 class="card-title">Project One</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
  </div>
  <a href="#" class="card-link text-info mt-auto">View CodePen</a>
</div>

＆＃13;

Check this pen on CodePen

仅供参考，您可以使用此方法使元素占用所有可用空间。

在Bootstrap 4中将链接对齐到卡的底部

3 个答案:

另一种解决方案

Check this pen on CodePen