Preventing Bootstrap button from filling flexbox

Question

I added d-flex and flex-column classes to a Bootstrap card-body class in order to align a contained button to the bottom of the card, as suggested in this question's top answer. My problem is that doing so caused the button to widen to fill the card. How can I get the button to return to shrinking to fit the button's text, as it did before I added the flex classes?

...
<div class="row pt-4" id="cards">
  <div class="card-deck">

    // THIS IS THE CARD WITH THE WIDENED BUTTON
    <div class="card">
      <img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image" >
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Giving Back</h5>
        <p class="card-text">Help others and feel useful</p>
        <a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
      </div>
    </div>

    // THIS CARD'S BUTTON SHRINKS TO FIT ITS TEXT
    <div class="card">
      <img class="card-img-top img-fluid" src="{{url_for('static', filename='spirituality.png')}}" alt="exercise_image" >
      <div class="card-body">
        <h5 class="card-title">Spirituality</h5>
        <p class="card-text">Connect to something larger than yourself</p>
        <a href="#" class="btn btn-primary">Set a Goal</a>
      </div>
    </div>

    ...

  </div>
</div>
...

Here's what the buttons look like:

Answer 1

只需将您的锚包裹在另一个 div 中

<div>
    <a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
</div>

<div>
    <a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
</div>

或 只需align-items-center在 flex div 上添加类

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row pt-4" id="cards">
      <div class="card-deck">
        <div class="card">
          <img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Giving Back</h5>
            <p class="card-text">Help others and feel useful</p>
            <div>
              <a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>