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 不支持卡片组。

Answer 2

要获得漂亮的网格，您可以使用此基线。您必须使用带有 class 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>

Answer 3

使用.card-deck 背后的整个想法是无网格。这允许您实现“加载更多卡片”功能，而无需重新计算网格。

因此，现在 Bootstrap 5 卡片组不再支持，您必须按照先前答案的建议再次使用 .col。由于不需要计算.col，我想这个决定是有道理的。

但是，如果您像我一样并且真的想使用无网格卡片组，请按照以下说明从.card-group（这是唯一的无网格卡片布局）中撤消耦合的方法。

.card-deck {
    @extend .card-group;
    gap: $spacer * 2; // create a gutter

    // de-couple the border
    @include media-breakpoint-up(sm){
        > .card {
            &:not(:first-child) {
                border-top-left-radius: $card-border-radius;
                border-bottom-left-radius: $card-border-radius;
            }

            &:not(:last-child) {
                border-top-right-radius: $card-border-radius;
                border-bottom-right-radius: $card-border-radius;
            }

            + .card {
                border-left: 1px solid $card-border-color;
            }
        }
    }

    // optionally change the breakpoint for column layout on mobile
    @include media-breakpoint-down(md){
        flex-direction: column;
    }
}

总而言之，我希望他们将整个边界耦合分开，加入一个装订线变量，这样我们仍然可以使用卡片组，而不必覆盖愚蠢的媒体查询。这让我对BS5有点失望。

Answer 4

在我发现 Bootstrap 5 不再支持卡片组之前，我被困了几个小时，注意！顺便说一下，这在引导程序纪录片中没有更新，但我们有实际证据证明这一点。

解决方案，使用网格格式将您的卡片放置在您想要的单行中。

示例代码：

<div class="row  row-cols-1 row-cols-md-3 mb-3 text-center">
  <div class="col">
    <div class="card">
        <div class="card-header">
              <h3>Card1 header</h3>
        </div>
        <div class="card-body">
          <p>Card1 body</p>
          <button type="button">Card1-Button</button>
        </div>
    </div>
  </div>

 <div class="col">
    <div class="card">
        <div class="card-header">
              <h3>Card2 header</h3>
        </div>
        <div class="card-body">
          <p>Card2 body</p>
          <button type="button">Card2-Button</button>
        </div>
    </div>
  </div
  <div class="col">
    <div class="card">
        <div class="card-header">
              <h3>Card3 header</h3>
        </div>
        <div class="card-body">
          <p>Card3 body</p>
          <button type="button">Card3-Button</button>
        </div>
    </div>
  </diviv>
</div>