bootstrap 5 alpha 2 卡片组示例没有像文档中那样显示

Question

我为卡片桌插入了这个示例，并认为它会像文档中显示的那样显示。但事实并非如此。
https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css - 我正在使用 Bootstrap 5 alpha 2。卡片布局是否改变了？
它显示为三行而不是 1 行 3 列。我们是否需要插入基于网格的 HTML 来包裹卡片组？

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Answer 1

使用<div class="card-group">和编辑网格格式代替。Bootstrap 5 不支持 Card-deck。

Answer 2

要获得漂亮的网格，您可以使用此基线。您必须使用带有类 col 的额外 div 才能获得列之间的良好间距。

<div class="row row-cols-1 row-cols-md-3 text-center">
      <div class="col">
        <div class="card">
             <div class="card-header">
              your header 1
            </div>
            <div class="card-body">
              your text 1
              <button type="button">Sign Up</button>
            </div>
            <div class="card-footer">
              your footer 1
            </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
            <div class="card-header">
              your header 2
            </div>
            <div class="card-body">
              your text 2
              <button type="button">Sign Up</button>
            </div>
            <div class="card-footer">
              your footer 2
            </div>
        </div>
      </div>
    </div>
  </section>