时间戳

首页 > 解决方案 > 在 Bootstrap 中格式化定价卡

html - 在 Bootstrap 中格式化定价卡

问题描述

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

这是我的代码：（使用引导程序 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">$49 / 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">$99 / 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>

标签： htmlcssbootstrap-4bootstrap-cards

解决方案

在'card-body'上添加这个'd-flex flex-column'两个类

在“注册按钮”上添加这个“mt-auto”类。

<div class="card-body d-flex flex-column">
    <h2 class="sub-heading">$99 / 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>

推荐阅读