使用 'card-deck' 类，顶部和底部的卡片重合答案

【问题标题】：Using 'card-deck' class, the top and bottom cards coincide使用 'card-deck' 类，顶部和底部的卡片重合
【发布时间】：2020-07-27 18:13:49
【问题描述】：

我正在使用bootstrap 4.5.0 上的card-deck 类，我面临的问题是，当新卡片出现在前一张卡片下方时，它们会在没有分隔符的情况下重合。

代码：

<!Doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <title>Index</title>
  </head>
  <body>
    <div class="container">
      <div class="h3">Index page</div>  
      
      <div class="card-deck">
        <div class="card bg-light" style="min-width: 15rem; max-width: 15rem; cursor: pointer;">
          <div class="card-body">
            <h5 class="card-title">product name</h5>
            <h6 class="card-subtitle">$10</h6>
          </div>
        </div>
        <div class="card bg-light" style="min-width: 15rem; max-width: 15rem; cursor: pointer;">
          <div class="card-body">
            <h5 class="card-title">product name</h5>
            <h6 class="card-subtitle">$10</h6>
          </div>
        </div>
        <div class="card bg-light" style="min-width: 15rem; max-width: 15rem; cursor: pointer;">
          <div class="card-body">
            <h5 class="card-title">product name</h5>
            <h6 class="card-subtitle">$10</h6>
          </div>
        </div>
        <div class="card bg-light" style="min-width: 15rem; max-width: 15rem; cursor: pointer;">
          <div class="card-body">
            <h5 class="card-title">product name</h5>
            <h6 class="card-subtitle">$10</h6>
          </div>
        </div>
        <div class="card bg-light" style="min-width: 15rem; max-width: 15rem; cursor: pointer;">
          <div class="card-body">
            <h5 class="card-title">product name</h5>
            <h6 class="card-subtitle">$10</h6>
          </div>
        </div>
      </div>    
    </div>
  </body>
</html>

预期：

-----  -----  -----  -----
  1      2      3      4
-----  -----  -----  -----
delimiter here
-----
  5
-----

我该如何解决这个问题？

【问题讨论】：

分隔符是什么意思？你能展示一下现在的情况吗？
我在这里用你的代码创建了演示：jsfiddle.net/2k41f597
嗨@Pritesh 谢谢它按预期工作，如果你发布为答案，我会标记接受。

标签： html twitter-bootstrap bootstrap-4

【解决方案1】：

我在这里用你的代码创建了演示：Demo

<!Doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <title>Index</title>
  </head>
  <body>
    <div class="container">
      <div class="h3">Index page</div>  
      
      <div class="card-deck">
        <div class="card bg-light" style="margin-bottom: 10px; min-width: 15rem; max-width: 15rem; cursor: pointer;">
          <div class="card-body">
            <h5 class="card-title">product name</h5>
            <h6 class="card-subtitle">$10</h6>
          </div>
        </div>
        <div class="card bg-light" style="margin-bottom: 10px; min-width: 15rem; max-width: 15rem; cursor: pointer;">
          <div class="card-body">
            <h5 class="card-title">product name</h5>
            <h6 class="card-subtitle">$10</h6>
          </div>
        </div>
        <div class="card bg-light" style="margin-bottom: 10px; min-width: 15rem; max-width: 15rem; cursor: pointer;">
          <div class="card-body">
            <h5 class="card-title">product name</h5>
            <h6 class="card-subtitle">$10</h6>
          </div>
        </div>
        <div class="card bg-light" style="margin-bottom: 10px; min-width: 15rem; max-width: 15rem; cursor: pointer;">
          <div class="card-body">
            <h5 class="card-title">product name</h5>
            <h6 class="card-subtitle">$10</h6>
          </div>
        </div>
        <div class="card bg-light" style="margin-bottom: 10px; min-width: 15rem; max-width: 15rem; cursor: pointer;">
          <div class="card-body">
            <h5 class="card-title">product name</h5>
            <h6 class="card-subtitle">$10</h6>
          </div>
        </div>
      </div>    
    </div>
  </body>
</html>

【讨论】：