Question

我将d-flex和flex-column类添加到Bootstrap card-body类，以便将包含的按钮与卡片的底部对齐，如this question's顶部答案中所述。我的问题是，这样做导致按钮加宽以填充卡。我怎样才能让按钮返回缩小以适应按钮的文本，就像我添加flex类之前一样？

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

以下是按钮的外观：

Answer 1

将你的锚点包装在另一个div中

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

＆＃13;

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

＆＃13;

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

＆＃13;
＆＃13;
<!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 align-items-center"> <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> </div> </div> </div> </body> </html>
＆＃13;
＆＃13;
＆＃13;

Answer 2

要为您的按钮分类，请添加mx-auto以使按钮居中，并添加mt-auto以将按钮按在卡的底部。

<!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 align-items-center">
            <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 mx-auto">Set a Goal</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

防止Bootstrap按钮填充flexbox

2 个答案: