在 Bootstrap 中格式化定价卡

Question

我想将 3 张定价卡排成一排，使它们的宽度和高度相同。
此外，每张卡片中的注册按钮必须位于卡片底部（无论卡片包含多少文本）并带有一些舒适的填充。
我试了很多都没有找到好的方法。求助！

这是我的代码：(使用了bootstrap 4.6)

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  text-align: center;
}

.container-fluid {
  padding: 7% 15%;
}

.pricing-card {
  padding: 5% 2%;
}

.pricing-plan {
  font-weight: 600;
}

<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<section id="pricing">
  <div class="container-fluid">
    <div class="row">
      <div class="pricing-card col-lg-4 col-md-6">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="pricing-plan">Chihuahua</h3>
          </div>
          <div class="card-body">
            <h2 class="sub-heading">Free</h2>
            <p>5 Matches Per Day</p>
            <p>10 Messages Per Day</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="sign-up-button btn-lg btn-block btn-outline-dark">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="pricing-card col-lg-4 col-md-6">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="pricing-plan">Labrador</h3>
          </div>
          <div class="card-body">
            <h2 class="sub-heading"> / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="sign-up-button btn-lg btn-block btn-dark">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="pricing-card col-lg-4 col-md-12">
        <div class="card h-150">
          <div class="card-header">
            <h3 class="pricing-plan">Mastiff</h3>
          </div>
          <div class="card-body">
            <h2 class="sub-heading"> / mo</h2>
            <p>Pirority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="sign-up-button btn-lg btn-block btn-dark">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

Answer 1

在'card-body'

上添加这个'd-flex flex-column'两个class

在 'sign-up-button' 上添加此 'mt-auto' class。

<div class="card-body d-flex flex-column">
    <h2 class="sub-heading"> / mo</h2>
    <p>Pirority Listing</p>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button" class="sign-up-button btn-lg btn-block btn-dark mt-auto">Sign Up</button>
</div>

Answer 2

对于bootstrap 4.6

将以下 classes 'd-flex flex-column' 添加到 div 和 class 'card-body'

将 class 'mt-auto' 添加到按钮。

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  text-align: center;
}

.container-fluid {
  padding: 7% 15%;
}

.pricing-card {
  padding: 5% 2%;
}

.pricing-plan {
  font-weight: 600;
}

<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<section id="pricing">
  <div class="container-fluid">
    <div class="row">
      <div class="pricing-card col-lg-4 col-md-6">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="pricing-plan">Chihuahua</h3>
          </div>
          <div class="card-body d-flex flex-column">
            <h2 class="sub-heading">Free</h2>
            <p>5 Matches Per Day</p>
            <p>10 Messages Per Day</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="mt-auto sign-up-button btn-lg btn-block btn-outline-dark">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="pricing-card col-lg-4 col-md-6">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="pricing-plan">Labrador</h3>
          </div>
          <div class="card-body d-flex flex-column">
            <h2 class="sub-heading"> / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="mt-auto sign-up-button btn-lg btn-block btn-dark">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="pricing-card col-lg-4 col-md-12">
        <div class="card h-150">
          <div class="card-header">
            <h3 class="pricing-plan">Mastiff</h3>
          </div>
          <div class="card-body d-flex flex-column">
            <h2 class="sub-heading"> / mo</h2>
            <p>Pirority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="mt-auto sign-up-button btn-lg btn-block btn-dark">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

在 Bootstrap 中格式化定价卡

Formatting pricing cards in Bootstrap

html

css

bootstrap-4

bootstrap-cards