将链接与Bootstrap 4中卡的底部对齐 [英] Align link to bottom of card in Bootstrap 4

问题描述

我想使链接与卡片的底部中心对齐.我尝试将类d-flex和flex-column添加到.card-body并将mt-auto添加到链接，如在其他地方建议的那样.请注意，我没有使用container或container-fluid div类(引导文档建议没有一个用于边缘到边缘的设计.

I would like to align links to the bottom center of cards. I tried adding the classes d-flex and flex-column to .card-body and mt-auto to the link, as suggested elsewhere. Note I'm not using a container or container-fluid div class (Bootstrap documentation suggests going without one for an edge-to-edge design).

相关HTML(对于完整代码视图 CodePen ):

Relevant HTML (for full code view 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>

推荐答案

链接放在末尾，链接上的d-flex和flex-column在card-body和mt-auto上.在您的CodePen上，您缺少某些此类(类的示例)！

The link is placed on the end with d-flex and flex-column on card-body and mt-auto on the link. On your CodePen you are missing some of these classes (example with classes)!

注意:您也可以在 Bootstrap 4的官方文档.

要使链接居中，可以使用card-link上的text-center类.

To center the links you can use the text-center class on the card-link.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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 text-center">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 d-flex flex-column">
        <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 mt-auto text-center">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 d-flex flex-column">
        <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 mt-auto text-center">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 d-flex flex-column">
        <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 mt-auto text-center">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 d-flex flex-column">
        <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 mt-auto text-center">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 d-flex flex-column">
        <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 mt-auto text-center">View CodePen</a>
      </div>
    </div>
  </div>
</div>

这篇关于将链接与Bootstrap 4中卡的底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！