Bootstrap 有没有办法自动对齐一系列卡片中的引导5英尺？

41ik7eoe 于 2023-03-16 发布在 Bootstrap

关注(0)|答案(2)|浏览(148)

当我在bootstrap 5中尝试下面的html代码时，第三列比前两列长：

<!-- bootstrap scripts -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
 
 <section id="pricing">

    <h2>A Plan for Every Giraffes's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>
    <div class="row row-cols-1 row-cols-md-3 rowy">
      <div class="col-md-6 col-lg-4 coly">
        <div class="card">  

          <div class="card-header">
            <h3>Chihuahua</h3>
          </div>
          <div class="card-body">
            <h2>Free</h2>
            <p>5 Matches Per Day</p>
            <p>10 Messages Per Day</p>
            <p>Unlimited App Usage</p>
            <!-- w-100 100% as wide as parent -->
            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign</button> 
          </div>
        <div class="card-footer">
            boogle</div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 coly">
        <div class="card">  

          <div class="card-header">
            <h3>Labrador</h3>

          </div>
          <div class="card-body">
            <h2>$49 / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="w-100 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
            <div class="card-footer">
            boogle</div>
        </div>
      </div>
      <div class="col-md-12 col-lg-4">
        <div class="card">  

          <div class="card-header">
            <h3>Mastiff</h3>
            
          </div>
          <div class="card-body">
            <h2>$99 / mo</h2>
            <p>Pirority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="w-75 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
          <div class="card-footer">
            boogle</div>
        </div>
    </div>
  </div>

我的理解是，在bootstrap 4中，我可以使用class=“card-deck”，所有的卡片将自动具有相同的长度。bootstrap 5中已删除此选项。bootstrap 5中是否有类似的内容？

twitter-bootstrap

来源：https://stackoverflow.com/questions/75716965/is-there-a-way-to-auto-align-bootstrap-5-footers-in-a-series-of-cards

2条答案

按热度按时间

ef1yzkbh1#

正如@HDP所指出的，如果您只需要所有的卡都有相同的高度，那么在卡上添加h-100就可以实现这一点。
如果你想让你的按钮排成一行，那么把卡片主体设置为d-flex flex-column，并把flex-grow-1加到每个卡片主体的最后一个段落标记上，这样按钮就会被推到卡片主体的底部。

<!-- bootstrap scripts -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
 
 <section id="pricing">

    <h2>A Plan for Every Giraffes's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>
    <div class="row row-cols-1 row-cols-md-3 rowy">
      <div class="col-md-6 col-lg-4 coly">
        <div class="card h-100">  

          <div class="card-header">
            <h3>Chihuahua</h3>
          </div>
          <div class="card-body d-flex flex-column">
            <h2>Free</h2>
            <p>5 Matches Per Day</p>
            <p>10 Messages Per Day</p>
            <p class="flex-grow-1">Unlimited App Usage</p>
            <!-- w-100 100% as wide as parent -->
            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign</button> 
          </div>
        <div class="card-footer">
            boogle</div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 coly">
        <div class="card h-100">  

          <div class="card-header">
            <h3>Labrador</h3>

          </div>
          <div class="card-body d-flex flex-column">
            <h2>$49 / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p class="flex-grow-1">Unlimited App Usage</p>
            <button type="button" class="w-100 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
            <div class="card-footer">
            boogle</div>
        </div>
      </div>
      <div class="col-md-12 col-lg-4">
        <div class="card h-100">  

          <div class="card-header">
            <h3>Mastiff</h3>
            
          </div>
          <div class="card-body d-flex flex-column">
            <h2>$99 / mo</h2>
            <p>Pirority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p class="flex-grow-1">Unlimited App Usage</p>
            <button type="button" class="w-75 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
          <div class="card-footer">
            boogle</div>
        </div>
    </div>
  </div>

赞(0）回复(0）举报 2023-03-16

nwsw7zdq2#

您需要将.h-100添加到卡中以获得相同的高度。

<!-- bootstrap scripts -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

 
    <h2>A Plan for Every Giraffes's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>
    <div class="row row-cols-1 row-cols-md-3 rowy">
      <div class="col-md-6 col-lg-4 coly">
        <div class="card h-100">  

          <div class="card-header">
            <h3>Chihuahua</h3>
          </div>
          <div class="card-body">
            <h2>Free</h2>
            <p>5 Matches Per Day</p>
            <p>10 Messages Per Day</p>
            <p>Unlimited App Usage</p>
            <!-- w-100 100% as wide as parent -->
            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign</button> 
          </div>
        <div class="card-footer">
            boogle</div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 coly">
        <div class="card h-100">  

          <div class="card-header">
            <h3>Labrador</h3>

          </div>
          <div class="card-body">
            <h2>$49 / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="w-100 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
            <div class="card-footer">
            boogle</div>
        </div>
      </div>
      <div class="col-md-12 col-lg-4">
        <div class="card h-100">  

          <div class="card-header">
            <h3>Mastiff</h3>
            
          </div>
          <div class="card-body">
            <h2>$99 / mo</h2>
            <p>Pirority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="w-75 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
          <div class="card-footer">
            boogle</div>
        </div>
    </div>
  </div>

赞(0）回复(0）举报 2023-03-16

我来回答

Bootstrap 有没有办法自动对齐一系列卡片中的引导5英尺？

2条答案

相关问题

热门标签

最新问答