卡-Bootstrap 5和Material Design 2.0组件

卡是一种灵活且可扩展的内容容器。它包括标题和 页脚,各种内容,上下文背景颜色和强大的显示 选项。


基本例子

注意:以下是带有混合内容和 固定宽度。卡没有固定的开始宽度,因此自然会填满 其父元素的完整宽度。

要控制卡片的宽度,请将其放置在网格中,使用大小调整实用程序,或设置 内联宽度。您可以在 调整版面大小

简单

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.


            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
                <button type="button" class="btn btn-primary">Button</button>
              </div>
            </div>
          

Image

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

            <div class="card">
              <img
                src="https://mdbootstrap.com/img/new/standard/nature/184.webp"
                class="card-img-top"
                alt="..."
              />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
                <a href="#!" class="btn btn-primary">Button</a>
              </div>
            </div>
          

波纹图像

要添加涟漪效果,并使其微妙 悬停效果,您需要进行修改 卡片图片的HTML标记。

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

            <div class="card">
              <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
                <img
                  src="https://mdbootstrap.com/img/new/standard/nature/111.webp"
                  class="img-fluid"
                />
                <a href="#!">
                  <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
                </a>
              </div>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
                <a href="#!" class="btn btn-primary">Button</a>
              </div>
            </div>
          

内容类型

卡片支持多种内容,包括图像,文本,列表组,链接等。 以下是支持的示例。

身体

卡的基本组成部分是 .card-body 。随时随地使用 卡中的填充部分。

This is some text within a card body.

            <div class="card">
              <div class="card-body">This is some text within a card body.</div>
            </div>
          

图片

.card-img-top 将图像放置在卡的顶部。用 .card-text, 文本可以添加到卡中。内文字 .card-text 也可以使用标准HTML标记设置样式。

...

Some quick example text to build on the card title and make up the bulk of the card's content.


            <div class="card" style="width: 18rem">
              <img
                src="https://mdbootstrap.com/img/new/standard/nature/182.webp"
                class="card-img-top"
                alt="..."
              />
              <div class="card-body">
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
          

清单群组

在带有刷新列表组的卡中创建内容列表。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

            <div class="card" style="width: 18rem">
              <ul class="list-group list-group-flush">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Vestibulum at eros</li>
              </ul>
            </div>
          
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

            <div class="card" style="width: 18rem">
              <div class="card-header">Featured</div>
              <ul class="list-group list-group-flush">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Vestibulum at eros</li>
              </ul>
            </div>
          
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

            <div class="card" style="width: 18rem">
              <ul class="list-group list-group-flush">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Vestibulum at eros</li>
              </ul>
              <div class="card-footer">Card footer</div>
            </div>
          

厨房水槽

混合并匹配多种内容类型以创建所需的卡片,或将所有内容丢入其中那里。下面显示的是图像样式,块,文本样式和列表组,它们都包裹在定宽卡。

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

            <div class="card" style="width: 18rem">
              <img
                src="https://mdbootstrap.com/img/new/standard/city/062.webp"
                class="card-img-top"
                alt="..."
              />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
              <ul class="list-group list-group-flush">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Vestibulum at eros</li>
              </ul>
              <div class="card-body">
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
              </div>
            </div>
          

浆纱

卡片假设没有特定的 width 来开始,因此它们的宽度为100%,除非 另有说明。您可以根据需要使用自定义CSS,网格类,网格Sass进行更改 mixins或实用程序。

使用网格标记

使用网格,根据需要将卡包装在列和行中。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

              <div class="row">
                <div class="col-sm-6">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title">Special title treatment</h5>
                      <p class="card-text">
                        With supporting text below as a natural lead-in to additional content.
                      </p>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title">Special title treatment</h5>
                      <p class="card-text">
                        With supporting text below as a natural lead-in to additional content.
                      </p>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                  </div>
                </div>
              </div>
            

使用实用程序

使用我们的少数 可用的大小调整实用程序以快速设置 卡的宽度。

Card title

With supporting text below as a natural lead-in to additional content.

Button

Card title

With supporting text below as a natural lead-in to additional content.

Button

              <div class="card w-75">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    With supporting text below as a natural lead-in to additional content.
                  </p>
                  <a href="#" class="btn btn-primary">Button</a>
                </div>
              </div>

              <div class="card w-50">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    With supporting text below as a natural lead-in to additional content.
                  </p>
                  <a href="#" class="btn btn-primary">Button</a>
                </div>
              </div>
            

使用自定义CSS

在样式表中使用自定义CSS或将其用作嵌入式样式来设置宽度。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

              <div class="card" style="width: 18rem">
                <div class="card-body">
                  <h5 class="card-title">Special title treatment</h5>
                  <p class="card-text">
                    With supporting text below as a natural lead-in to additional content.
                  </p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            

文字对齐

您可以使用以下方法快速更改任何卡片的整体或特定部分的文本对齐方式: 我们的 文本对齐类

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

            <div class="card" style="width: 18rem">
              <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">
                  With supporting text below as a natural lead-in to additional content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>

            <div class="card text-center" style="width: 18rem">
              <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">
                  With supporting text below as a natural lead-in to additional content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>

            <div class="card text-end" style="width: 18rem">
              <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">
                  With supporting text below as a natural lead-in to additional content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          

导航

使用MDB在卡头(或块)中添加一些导航 药片标签组件。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

          <div class="card text-center">
            <div class="card-header">
              <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="true" href="#!">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#!">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true"
                    >Disabled</a
                  >
                </li>
              </ul>
            </div>
            <div class="card-body">
              <h5 class="card-title">Special title treatment</h5>
              <p class="card-text">
                With supporting text below as a natural lead-in to additional content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

          <div class="card text-center">
            <div class="card-header">
              <ul class="nav nav-pills card-header-tabs">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="true" href="#!">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#!">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true"
                    >Disabled</a
                  >
                </li>
              </ul>
            </div>
            <div class="card-body">
              <h5 class="card-title">Special title treatment</h5>
              <p class="card-text">
                With supporting text below as a natural lead-in to additional content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        

图片

卡包含用于处理图像的一些选项。从附加“图像上限”中选择 卡片的任一端,将图像与卡片内容叠加在一起,或仅将图像嵌入到 卡。

图像帽

与页眉和页脚相似,卡片可以包含顶部和底部的“图像上限”,即“ 卡的顶部或底部。

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

...

            <div class="card mb-3">
              <img
                src="https://mdbootstrap.com/img/new/slides/041.webp"
                class="card-img-top"
                alt="..."
              />
              <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 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">
              <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 content is a little bit longer.
                </p>
                <p class="card-text">
                  <small class="text-muted">Last updated 3 mins ago</small>
                </p>
              </div>
              <img
                src="https://mdbootstrap.com/img/new/slides/042.webp"
                class="card-img-bottom"
                alt="..."
              />
            </div>
          

图像叠加

将图片变成卡片背景并覆盖卡片上的文字。根据图像, 您可能需要也可能不需要其他样式或实用程序。

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago


            <div class="card bg-dark text-white">
              <img
                src="https://mdbootstrap.com/img/new/slides/017.webp"
                class="card-img"
                alt="..."
              />
              <div class="card-img-overlay">
                <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 content is a little bit longer.
                </p>
                <p class="card-text">Last updated 3 mins ago</p>
              </div>
            </div>
          

注意:内容不得大于图片的高度。如果满足 大于图像,内容将显示在图像外部。


卧式

结合使用网格和实用程序类,可以将卡水平放置在 移动友好且响应迅速的方式。在下面的示例中,我们使用 .g-0 并使用 .col-md-* 类将卡水平放置在 md 断点。根据您的卡内容,可能需要进一步调整。

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago


          <div class="card mb-3" style="max-width: 540px">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://mdbootstrap.com/wp-content/uploads/2020/06/vertical.webp"
                  alt="..."
                  class="img-fluid"
                />
              </div>
              <div class="col-md-8">
                <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 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>
          </div>
        

卡片样式

卡片包含用于自定义背景,边框和颜色的各种选项。

背景和颜色

采用 文本和背景实用程序 更改卡的外观。

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.


            <div class="card text-white bg-primary mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card text-white bg-secondary mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card text-white bg-success mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card text-white bg-danger mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card bg-warning mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card text-body bg-info mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card bg-light mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card text-white bg-dark mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
          

向辅助技术体现意义:
使用颜色添加含义仅提供视觉指示,不会传达给 辅助技术的用户-例如屏幕阅读器。确保信息表示为 颜色可以从内容本身(例如可见文字)中显而易见,也可以包含在内 通过其他方式,例如用 .visually-hidden 类。

边境

使用边界实用程序仅更改 卡的 border-color 。请注意,您可以放 父 .card 上的 .text- {color} 类或 卡的内容,如下所示。

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.


            <div class="card border border-primary shadow-0 mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body text-primary">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card border border-secondary shadow-0 mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body text-secondary">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card border border-success shadow-0 mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body text-success">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card border border-danger shadow-0 mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body text-danger">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card border border-warning shadow-0 mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card border border-info shadow-0 mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card border border-light shadow-0 mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
            <div class="card border border-dark mb-3" style="max-width: 18rem">
              <div class="card-header">Header</div>
              <div class="card-body text-dark">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
            </div>
          

Mixins实用程序

您还可以根据需要更改卡的页眉和页脚的边框,甚至删除 他们的 background-color .bg-transparent

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.


            <div class="card border border-success shadow-0 mb-3" style="max-width: 18rem">
              <div class="card-header bg-transparent border-success">Header</div>
              <div class="card-body text-success">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
              </div>
              <div class="card-footer bg-transparent border-success">Footer</div>
            </div>
          

卡布局

除了对卡片中的内容进行样式设置之外,Bootstrap还包括一些用于布局的选项 出一系列的卡片。暂且, 这些布局选项尚未响应

卡组

使用卡组将卡呈现为宽度和高度相等的单个附加元素 列。卡组开始堆叠并使用 display:flex; 将以统一尺寸连接到 sm 断点。

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

...
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

...
Card title

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.

Last updated 3 mins ago


            <div class="card-group">
              <div class="card">
                <img
                  src="https://mdbootstrap.com/img/new/standard/city/041.webp"
                  class="card-img-top"
                  alt="..."
                />
                <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 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
                  src="https://mdbootstrap.com/img/new/standard/city/042.webp"
                  class="card-img-top"
                  alt="..."
                />
                <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
                  src="https://mdbootstrap.com/img/new/standard/city/043.webp"
                  class="card-img-top"
                  alt="..."
                />
                <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>
          

When using card groups with footers, their content will automatically line up.

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This card has supporting text below as a natural lead-in to additional content.

...
Card title

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.


            <div class="card-group">
              <div class="card">
                <img
                  src="https://mdbootstrap.com/img/new/standard/city/041.webp"
                  class="card-img-top"
                  alt="..."
                />
                <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 content is a little bit longer.
                  </p>
                </div>
                <div class="card-footer">
                  <small class="text-muted">Last updated 3 mins ago</small>
                </div>
              </div>
              <div class="card">
                <img
                  src="https://mdbootstrap.com/img/new/standard/city/042.webp"
                  class="card-img-top"
                  alt="..."
                />
                <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>
                </div>
                <div class="card-footer">
                  <small class="text-muted">Last updated 3 mins ago</small>
                </div>
              </div>
              <div class="card">
                <img
                  src="https://mdbootstrap.com/img/new/standard/city/043.webp"
                  class="card-img-top"
                  alt="..."
                />
                <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>
                </div>
                <div class="card-footer">
                  <small class="text-muted">Last updated 3 mins ago</small>
                </div>
              </div>
            </div>
          

网格卡

使用Bootstrap 网格系统及其 .row-cols 类可控制(围绕卡包装的)多少个网格列 您每行显示一次。例如,这里的 .row-cols-1 将卡片布置在一个 列,然后 .row-cols-md-2 将四张卡片分成相等的宽度 行,从中等断点开始。

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.


            <div class="row row-cols-1 row-cols-md-2 g-4">
              <div class="col">
                <div class="card">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/041.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/042.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/043.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/044.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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>
                  </div>
                </div>
              </div>
            </div>
          

Change it to .row-cols-3 and you’ll see the fourth card wrap.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.


            <div class="row row-cols-1 row-cols-md-3 g-4">
              <div class="col">
                <div class="card">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/041.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/042.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/043.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/044.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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>
                  </div>
                </div>
              </div>
            </div>
          

当您需要相等的高度时,将 .h-100 添加到卡片中。如果您要等高 默认情况下,您可以在Sass中设置 $ card-height:100%

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a short card.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.


            <div class="row row-cols-1 row-cols-md-3 g-4">
              <div class="col">
                <div class="card h-100">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/041.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card h-100">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/042.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a short card.</p>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card h-100">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/043.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card h-100">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/044.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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>
                  </div>
                </div>
              </div>
            </div>
          

就像卡片组一样,卡片页脚将自动对齐。

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This card has supporting text below as a natural lead-in to additional content.

...
Card title

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.


            <div class="row row-cols-1 row-cols-md-3 g-4">
              <div class="col">
                <div class="card h-100">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/044.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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 content is a little bit longer.
                    </p>
                  </div>
                  <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card h-100">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/043.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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>
                  </div>
                  <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card h-100">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/042.webp"
                    class="card-img-top"
                    alt="..."
                  />
                  <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>
                  </div>
                  <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                  </div>
                </div>
              </div>
            </div>
          

Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.

JOIN OUR MAILING LIST NOW
© 2021 Copyright: MDBootstrap.com