• .card卡片组件（样式）
    • 关于
    • 示例
    • 内容类型
      • 主体
      • 标题、文字和链接
      • 图片
      • 列表组
      • 混合样式
      • 页眉页脚
    • 缩放
      • 使用栅格系统
      • 使用通用全局属性
      • 自定义CSS
    • 文本对齐
    • 导航
    • 图片
      • 图片覆盖
      • 图像叠加覆盖
    • 水平排列
    • 卡片样式
      • 背景和颜色
        • 网页中传达辅助技术及其背后的意义
      • 边框
      • Mixins 实用程序
    • 卡片排版
      • 卡片组
      • Card decks卡片阵列
      • 多列卡片浮动排版

    .card卡片组件（样式）

    卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体。

    关于

    .card卡片组件是BootStrap 4新增的一组重要样式，它是一一个灵活的、可扩展的内容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。

    使用按钮组合，可以把一系列按钮编组在一行里，并通过可选的JavaScript插件(方法)赋予按钮单选、复选等强化行为。

    如果你对Bootstrap 3很熟悉，卡片代替了我们旧的panel、well和thumbnail样式—那些组件类似的功能可以通过卡片的修饰类来实现。

    示例

    卡片作为一个新式引入到BootStrap 4中，可能样式、标记和扩展属性不会很多（未来会不断扩充发展），但它仍然可以提供许多控制项和定义方法，由于我们使用了flex弹性布局，使得它们可以轻松对齐、并方便的与其它Bootstrap组件混合搭配使用。

    下面是一个具有混合内容并固定了宽度的基本.card卡片使用范例，如果.card卡片如果没有定义宽度，将自然地填满父元素的全宽-利用这个属性，我们可以轻松的订制各种尺寸的卡片。

    卡片(Card) - 图1

    1. <div class="card" style="width: 18rem;">
    2.   <img class="card-img-top" src="..." alt="Card image cap">
    3.   <div class="card-body">
    4.     <h5 class="card-title">Card title</h5>
    5.     <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>
    6.     <a href="#" class="btn btn-primary">Go somewhere</a>
    7.   </div>
    8. </div>

    内容类型

    卡片支持多种多样的内容，包括图片、文本、列组、链接等，混合并匹配多种内容类型以创建你想要的卡片。

    主体

    引用.card-body样式，可以建立起卡片的内容主体，如果你需要在一个.card中装置带边框的内容时，可以使用它。

    卡片(Card) - 图2

    1. <div class="card">
    2.   <div class="card-body">
    3.     This is some text within a card body.
    4.   </div>
    5. </div>

    标题、文字和链接

    通过.card-title和 <h*>组合，可以添加卡片标题。同亲将.card-link 与 <a>结合使用，可以方便添加平行的链接。

    通过 .card-subtitle 和 <h*> 结合，可以添加副标题，如果 .card-title 和 .card-subtitle 组合放在 .card-body 中, 则可对齐主、副标题。

    卡片(Card) - 图3

    1. <div class="card" style="width: 18rem;">
    2.   <div class="card-body">
    3.     <h5 class="card-title">Card title</h5>
    4.     <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    5.     <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>
    6.     <a href="#" class="card-link">Card link</a>
    7.     <a href="#" class="card-link">Another link</a>
    8.   </div>
    9. </div>

    图片

    .card-img-top 定义一张图片在卡片的顶部， .card-text定义文字在卡片中，当然你也可以在.card-text 中设计自己的个性化HTML标签样式。

    卡片(Card) - 图4

    1. <div class="card" style="width: 18rem;">
    2.   <img class="card-img-top" src="..." alt="Card image cap">
    3.   <div class="card-body">
    4.     <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>
    5.   </div>
    6. </div>

    列表组

    建立一个包含内容的列表组卡片。

    卡片(Card) - 图5

    1. <div class="card" style="width: 18rem;">
    2.   <ul class="list-group list-group-flush">
    3.     <li class="list-group-item">Cras justo odio</li>
    4.     <li class="list-group-item">Dapibus ac facilisis in</li>
    5.     <li class="list-group-item">Vestibulum at eros</li>
    6.   </ul>
    7. </div>

    卡片(Card) - 图6

    1. <div class="card" style="width: 18rem;">
    2.   <div class="card-header">
    3.     Featured
    4.   </div>
    5.   <ul class="list-group list-group-flush">
    6.     <li class="list-group-item">Cras justo odio</li>
    7.     <li class="list-group-item">Dapibus ac facilisis in</li>
    8.     <li class="list-group-item">Vestibulum at eros</li>
    9.   </ul>
    10. </div>

    混合样式

    混合并结合多种内容形式来创建个性化卡片，下例即是将图像、块、文字以及列表整合在一个固定宽度的卡片中。

    卡片(Card) - 图7

    1. <div class="card" style="width: 18rem;">
    2.   <img class="card-img-top" src="..." alt="Card image cap">
    3.   <div class="card-body">
    4.     <h5 class="card-title">Card title</h5>
    5.     <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>
    6.   </div>
    7.   <ul class="list-group list-group-flush">
    8.     <li class="list-group-item">Cras justo odio</li>
    9.     <li class="list-group-item">Dapibus ac facilisis in</li>
    10.     <li class="list-group-item">Vestibulum at eros</li>
    11.   </ul>
    12.   <div class="card-body">
    13.     <a href="#" class="card-link">Card link</a>
    14.     <a href="#" class="card-link">Another link</a>
    15.   </div>
    16. </div>

    页眉页脚

    在卡内添加可选的页眉和/或页脚。

    卡片(Card) - 图8

    1. <div class="card">
    2.   <div class="card-header">
    3.     Featured
    4.   </div>
    5.   <div class="card-body">
    6.     <h5 class="card-title">Special title treatment</h5>
    7.     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    8.     <a href="#" class="btn btn-primary">Go somewhere</a>
    9.   </div>
    10. </div>

    可以将 <h*> 元素添加到 .card-header页头中。

    卡片(Card) - 图9

    1. <div class="card">
    2.   <h5 class="card-header">Featured</h4>
    3.   <div class="card-body">
    4.     <h4 class="card-title">Special title treatment</h4>
    5.     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    6.     <a href="#" class="btn btn-primary">Go somewhere</a>
    7.   </div>
    8. </div>

    卡片(Card) - 图10

    1. <div class="card">
    2.   <div class="card-header">
    3.     Quote
    4.   </div>
    5.   <div class="card-body">
    6.     <blockquote class="blockquote mb-0">
    7.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    8.       <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    9.     </blockquote>
    10.   </div>
    11. </div>

    卡片(Card) - 图11

    1. <div class="card text-center">
    2.   <div class="card-header">
    3.     Featured
    4.   </div>
    5.   <div class="card-body">
    6.     <h5 class="card-title">Special title treatment</h5>
    7.     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    8.     <a href="#" class="btn btn-primary">Go somewhere</a>
    9.   </div>
    10.   <div class="card-footer text-muted">
    11.     2 days ago
    12.   </div>
    13. </div>

    缩放

    卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。

    使用栅格系统

    使用栅格系统，根据需求按行与列来装载卡片。

    卡片(Card) - 图12

    1. <div class="row">
    2.   <div class="col-sm-6">
    3.     <div class="card">
    4.       <div class="card-body">
    5.         <h5 class="card-title">Special title treatment</h5>
    6.         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    7.         <a href="#" class="btn btn-primary">Go somewhere</a>
    8.       </div>
    9.     </div>
    10.   </div>
    11.   <div class="col-sm-6">
    12.     <div class="card">
    13.       <div class="card-body">
    14.         <h5 class="card-title">Special title treatment</h5>
    15.         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    16.         <a href="#" class="btn btn-primary">Go somewhere</a>
    17.       </div>
    18.     </div>
    19.   </div>
    20. </div>

    使用通用全局属性

    使用我们提供的通用全局属性来定义卡片的宽度。

    卡片(Card) - 图13

    1. <div class="card w-75">
    2.   <div class="card-body">
    3.     <h5 class="card-title">Card title</h5>
    4.     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    5.     <a href="#" class="btn btn-primary">Button</a>
    6.   </div>
    7. </div>
    9. <div class="card w-50">
    10.   <div class="card-body">
    11.     <h5 class="card-title">Card title</h5>
    12.     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    13.     <a href="#" class="btn btn-primary">Button</a>
    14.   </div>
    15. </div>

    自定义CSS

    在样式表中使用自定义CSS或使用内联样式设置宽度。

    卡片(Card) - 图14

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

    文本对齐

    使用我们的文本对齐类来更改或特定部份的文本对齐。

    卡片(Card) - 图15

    1. <div class="card" style="width: 18rem;">
    2.   <div class="card-body">
    3.     <h5 class="card-title">Special title treatment</h5>
    4.     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    5.     <a href="#" class="btn btn-primary">Go somewhere</a>
    6.   </div>
    7. </div>
    9. <div class="card text-center" style="width: 18rem;">
    10.   <div class="card-body">
    11.     <h5 class="card-title">Special title treatment</h5>
    12.     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    13.     <a href="#" class="btn btn-primary">Go somewhere</a>
    14.   </div>
    15. </div>
    17. <div class="card text-right" style="width: 18rem;">
    18.   <div class="card-body">
    19.     <h5 class="card-title">Special title treatment</h5>
    20.     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    21.     <a href="#" class="btn btn-primary">Go somewhere</a>
    22.   </div>
    23. </div>

    导航

    使用 Bootstrap导航组件将导航元件添加到卡片的标题或块中

    卡片(Card) - 图16

    1. <div class="card text-center">
    2.   <div class="card-header">
    3.     <ul class="nav nav-tabs card-header-tabs">
    4.       <li class="nav-item">
    5.         <a class="nav-link active" href="#">Active</a>
    6.       </li>
    7.       <li class="nav-item">
    8.         <a class="nav-link" href="#">Link</a>
    9.       </li>
    10.       <li class="nav-item">
    11.         <a class="nav-link disabled" href="#">Disabled</a>
    12.       </li>
    13.     </ul>
    14.   </div>
    15.   <div class="card-body">
    16.     <h5 class="card-title">Special title treatment</h5>
    17.     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    18.     <a href="#" class="btn btn-primary">Go somewhere</a>
    19.   </div>
    20. </div>

    卡片(Card) - 图17

    1. <div class="card text-center">
    2.   <div class="card-header">
    3.     <ul class="nav nav-pills card-header-pills">
    4.       <li class="nav-item">
    5.         <a class="nav-link active" href="#">Active</a>
    6.       </li>
    7.       <li class="nav-item">
    8.         <a class="nav-link" href="#">Link</a>
    9.       </li>
    10.       <li class="nav-item">
    11.         <a class="nav-link disabled" href="#">Disabled</a>
    12.       </li>
    13.     </ul>
    14.   </div>
    15.   <div class="card-body">
    16.     <h5 class="card-title">Special title treatment</h5>
    17.     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    18.     <a href="#" class="btn btn-primary">Go somewhere</a>
    19.   </div>
    20. </div>

    图片

    卡片中包含一些选项来搭配图像，选择在卡片的任何一端附加.cad-img-*，用卡片内容覆盖图像（如同背景），或者只是将图像置入到卡片当中。

    图片覆盖

    可以使用用 Image caps在卡片顶部或是底部，定义图片，如同页眉页脚效果。

    卡片(Card) - 图18

    1. <div class="card mb-3">
    2.   <img class="card-img-top" src="..." alt="Card image cap">
    3.   <div class="card-body">
    4.     <h5 class="card-title">Card title</h5>
    5.     <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>
    6.     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    7.   </div>
    8. </div>
    9. <div class="card">
    10.   <div class="card-body">
    11.     <h5 class="card-title">Card title</h5>
    12.     <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>
    13.     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    14.   </div>
    15.   <img class="card-img-bottom" src="..." alt="Card image cap">
    16. </div>

    图像叠加覆盖

    将图像转换为卡片背景，并覆盖卡片的文字。根据图像，你可以选择是否需要额外的样式或其它属性定义。

    卡片(Card) - 图19

    1. <div class="card bg-dark text-white">
    2.   <img class="card-img" src="..." alt="Card image">
    3.   <div class="card-img-overlay">
    4.     <h5 class="card-title">Card title</h5>
    5.     <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>
    6.     <p class="card-text">Last updated 3 mins ago</p>
    7.   </div>
    8. </div>

    请注意，内容不应大于图像的高度。 如果内容大于图像，则内容将显示在图像外部.

    水平排列

    使用网格和实用程序类的组合，可以以移动友好和响应方式使卡水平。 在下面的示例中，我们使用.no-gutters删除网格排水沟，并使用.col-md-* 类使卡在md 断点处水平。 根据您的卡内容，可能需要进一步调整。

    卡片(Card) - 图20

    1. <div class="card mb-3" style="max-width: 540px;">
    2.   <div class="row no-gutters">
    3.     <div class="col-md-4">
    4.       <img src="..." class="card-img" alt="...">
    5.     </div>
    6.     <div class="col-md-8">
    7.       <div class="card-body">
    8.         <h5 class="card-title">Card title</h5>
    9.         <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>
    10.         <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    11.       </div>
    12.     </div>
    13.   </div>
    14. </div>

    卡片样式

    订制卡片、边框 、颜色等方法。

    背景和颜色

    使用 文字和通用背景定义 定义卡片的显示颜色。

    卡片(Card) - 图21

    1. <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
    2.   <div class="card-header">Header</div>
    3.   <div class="card-body">
    4.     <h5 class="card-title">Primary card title</h5>
    5.     <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>
    6.   </div>
    7. </div>
    8. <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
    9.   <div class="card-header">Header</div>
    10.   <div class="card-body">
    11.     <h5 class="card-title">Secondary card title</h5>
    12.     <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>
    13.   </div>
    14. </div>
    15. <div class="card text-white bg-success mb-3" style="max-width: 20rem;">
    16.   <div class="card-header">Header</div>
    17.   <div class="card-body">
    18.     <h5 class="card-title">Success card title</h5>
    19.     <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>
    20.   </div>
    21. </div>
    22. <div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
    23.   <div class="card-header">Header</div>
    24.   <div class="card-body">
    25.     <h5 class="card-title">Danger card title</h5>
    26.     <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>
    27.   </div>
    28. </div>
    29. <div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
    30.   <div class="card-header">Header</div>
    31.   <div class="card-body">
    32.     <h5 class="card-title">Warning card title</h5>
    33.     <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>
    34.   </div>
    35. </div>
    36. <div class="card text-white bg-info mb-3" style="max-width: 20rem;">
    37.   <div class="card-header">Header</div>
    38.   <div class="card-body">
    39.     <h5 class="card-title">Info card title</h5>
    40.     <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>
    41.   </div>
    42. </div>
    43. <div class="card bg-light mb-3" style="max-width: 20rem;">
    44.   <div class="card-header">Header</div>
    45.   <div class="card-body">
    46.     <h5 class="card-title">Light card title</h5>
    47.     <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>
    48.   </div>
    49. </div>
    50. <div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
    51.   <div class="card-header">Header</div>
    52.   <div class="card-body">
    53.     <h5 class="card-title">Dark card title</h5>
    54.     <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>
    55.   </div>
    56. </div>

    网页中传达辅助技术及其背后的意义

    使用颜色添加意义只提供一个视觉指示，这不会传达给需要辅助技术（如盲人、听力障碍者）的用户，也就决定了诸如屏幕阅读器并不能读出颜色本身的意义。一般推荐确保由颜色表示的信息从内容本身（例如可见文本）中显而易见，或者通过替代方法，例如隐藏在.sr-only该类中的附加文本来创造更多的辅助传达技术。

    .sr-only，全称 screen reader only,意为:(仅供)屏幕阅读器,这个 class 主要用于增强 accessbility(可访问性),有时候 UI 上会出现一些仅供视觉识别的元素，比如说“菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢？因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现（译者补充）。

    边框

    使用 边框通用样式 来改变卡片的border-color 、 .text-{color} ，或者在父层的 .card 上显示内容。

    卡片(Card) - 图22

    1. <div class="card border-primary mb-3" style="max-width: 20rem;">
    2.   <div class="card-header">Header</div>
    3.   <div class="card-body text-primary">
    4.     <h5 class="card-title">Primary card title</h5>
    5.     <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>
    6.   </div>
    7. </div>
    8. <div class="card border-secondary mb-3" style="max-width: 20rem;">
    9.   <div class="card-header">Header</div>
    10.   <div class="card-body text-secondary">
    11.     <h5 class="card-title">Secondary card title</h5>
    12.     <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>
    13.   </div>
    14. </div>
    15. <div class="card border-success mb-3" style="max-width: 20rem;">
    16.   <div class="card-header">Header</div>
    17.   <div class="card-body text-success">
    18.     <h5 class="card-title">Success card title</h5>
    19.     <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>
    20.   </div>
    21. </div>
    22. <div class="card border-danger mb-3" style="max-width: 20rem;">
    23.   <div class="card-header">Header</div>
    24.   <div class="card-body text-danger">
    25.     <h5 class="card-title">Danger card title</h5>
    26.     <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>
    27.   </div>
    28. </div>
    29. <div class="card border-warning mb-3" style="max-width: 20rem;">
    30.   <div class="card-header">Header</div>
    31.   <div class="card-body text-warning">
    32.     <h5 class="card-title">Warning card title</h5>
    33.     <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>
    34.   </div>
    35. </div>
    36. <div class="card border-info mb-3" style="max-width: 20rem;">
    37.   <div class="card-header">Header</div>
    38.   <div class="card-body text-info">
    39.     <h5 class="card-title">Info card title</h5>
    40.     <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>
    41.   </div>
    42. </div>
    43. <div class="card border-light mb-3" style="max-width: 20rem;">
    44.   <div class="card-header">Header</div>
    45.   <div class="card-body">
    46.     <h5 class="card-title">Light card title</h5>
    47.     <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>
    48.   </div>
    49. </div>
    50. <div class="card border-dark mb-3" style="max-width: 20rem;">
    51.   <div class="card-header">Header</div>
    52.   <div class="card-body text-dark">
    53.     <h5 class="card-title">Dark card title</h5>
    54.     <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>
    55.   </div>
    56. </div>

    Mixins 实用程序

    您还可以更改卡上的页眉和页脚所需的边框，也能使用.bg-transparent删除其background-color背景颜色。

    卡片(Card) - 图23

    1. <div class="card border-success mb-3" style="max-width: 20rem;">
    2.   <div class="card-header bg-transparent border-success">Header</div>
    3.   <div class="card-body text-success">
    4.     <h5 class="card-title">Success card title</h5>
    5.     <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>
    6.   </div>
    7.   <div class="card-footer bg-transparent border-success">Footer</div>
    8. </div>

    卡片排版

    Bootstrap除了对卡片內的內容可以进行设计排版外，还包括一系列布置选项，目前这些布置选项还不支持响应式。

    卡片组

    将多个卡片结为一个群组，使用他们具有相同的宽度和高度列。卡片组使用display: flex;来实现统一的布局。

    卡片(Card) - 图24

    1. <div class="card-group">
    2.   <div class="card">
    3.     <img class="card-img-top" src="..." alt="Card image cap">
    4.     <div class="card-body">
    5.       <h5 class="card-title">Card title</h5>
    6.       <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>
    7.       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    8.     </div>
    9.   </div>
    10.   <div class="card">
    11.     <img class="card-img-top" src="..." alt="Card image cap">
    12.     <div class="card-body">
    13.       <h5 class="card-title">Card title</h5>
    14.       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    15.       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    16.     </div>
    17.   </div>
    18.   <div class="card">
    19.     <img class="card-img-top" src="..." alt="Card image cap">
    20.     <div class="card-body">
    21.       <h5 class="card-title">Card title</h5>
    22.       <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>
    23.       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    24.     </div>
    25.   </div>
    26. </div>

    当使用带页脚的卡片图时，他们的内容会自动水平对齐和栅格式布局。

    卡片(Card) - 图25

    1. <div class="card-group">
    2.   <div class="card">
    3.     <img class="card-img-top" src="..." alt="Card image cap">
    4.     <div class="card-body">
    5.       <h5 class="card-title">Card title</h5>
    6.       <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>
    7.     </div>
    8.     <div class="card-footer">
    9.       <small class="text-muted">Last updated 3 mins ago</small>
    10.     </div>
    11.   </div>
    12.   <div class="card">
    13.     <img class="card-img-top" src="..." alt="Card image cap">
    14.     <div class="card-body">
    15.       <h5 class="card-title">Card title</h5>
    16.       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    17.     </div>
    18.     <div class="card-footer">
    19.       <small class="text-muted">Last updated 3 mins ago</small>
    20.     </div>
    21.   </div>
    22.   <div class="card">
    23.     <img class="card-img-top" src="..." alt="Card image cap">
    24.     <div class="card-body">
    25.       <h5 class="card-title">Card title</h5>
    26.       <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>
    27.     </div>
    28.     <div class="card-footer">
    29.       <small class="text-muted">Last updated 3 mins ago</small>
    30.     </div>
    31.   </div>
    32. </div>

    Card decks卡片阵列

    需要一套相互不相连，但宽度和高度相同的卡片？使用卡片阵列（Card decks）吧。

    卡片(Card) - 图26

    1. <div class="card-deck">
    2.   <div class="card">
    3.     <img class="card-img-top" src="..." alt="Card image cap">
    4.     <div class="card-body">
    5.       <h5 class="card-title">Card title</h5>
    6.       <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>
    7.       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    8.     </div>
    9.   </div>
    10.   <div class="card">
    11.     <img class="card-img-top" src="..." alt="Card image cap">
    12.     <div class="card-body">
    13.       <h5 class="card-title">Card title</h5>
    14.       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    15.       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    16.     </div>
    17.   </div>
    18.   <div class="card">
    19.     <img class="card-img-top" src="..." alt="Card image cap">
    20.     <div class="card-body">
    21.       <h5 class="card-title">Card title</h5>
    22.       <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>
    23.       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    24.     </div>
    25.   </div>
    26. </div>

    与卡片组一样，卡片阵列中的的的卡片页脚会自动排列。

    卡片(Card) - 图27

    1. <div class="card-deck">
    2.   <div class="card">
    3.     <img class="card-img-top" src="..." alt="Card image cap">
    4.     <div class="card-body">
    5.       <h5 class="card-title">Card title</h5>
    6.       <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>
    7.     </div>
    8.     <div class="card-footer">
    9.       <small class="text-muted">Last updated 3 mins ago</small>
    10.     </div>
    11.   </div>
    12.   <div class="card">
    13.     <img class="card-img-top" src="..." alt="Card image cap">
    14.     <div class="card-body">
    15.       <h5 class="card-title">Card title</h5>
    16.       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    17.     </div>
    18.     <div class="card-footer">
    19.       <small class="text-muted">Last updated 3 mins ago</small>
    20.     </div>
    21.   </div>
    22.   <div class="card">
    23.     <img class="card-img-top" src="..." alt="Card image cap">
    24.     <div class="card-body">
    25.       <h5 class="card-title">Card title</h5>
    26.       <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>
    27.     </div>
    28.     <div class="card-footer">
    29.       <small class="text-muted">Last updated 3 mins ago</small>
    30.     </div>
    31.   </div>
    32. </div>

    多列卡片浮动排版

    將卡片包在.card-columns 中，可以將做出象 Masonry网站的瀑布式排列卡片效果，卡片是使用column属性，而不是基于 flexbox弹性布局，从而实现更方便实用的浮动对齐，顺序是从上到下、从左到右。

    注意： 为了防止卡片排列突出栏目，我们必须为它们设置为 display: inline-block （当 column-break-inside: avoid 这个解决方案还没有生效时。

    卡片(Card) - 图28

    1. <div class="card-columns">
    2.   <div class="card">
    3.     <img class="card-img-top" src="..." alt="Card image cap">
    4.     <div class="card-body">
    5.       <h5 class="card-title">Card title that wraps to a new line</h5>
    6.       <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>
    7.     </div>
    8.   </div>
    9.   <div class="card p-3">
    10.     <blockquote class="blockquote mb-0 card-body">
    11.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    12.       <footer class="blockquote-footer">
    13.         <small class="text-muted">
    14.           Someone famous in <cite title="Source Title">Source Title</cite>
    15.         </small>
    16.       </footer>
    17.     </blockquote>
    18.   </div>
    19.   <div class="card">
    20.     <img class="card-img-top" src="..." alt="Card image cap">
    21.     <div class="card-body">
    22.       <h5 class="card-title">Card title</h5>
    23.       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    24.       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    25.     </div>
    26.   </div>
    27.   <div class="card bg-primary text-white text-center p-3">
    28.     <blockquote class="blockquote mb-0">
    29.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
    30.       <footer class="blockquote-footer">
    31.         <small>
    32.           Someone famous in <cite title="Source Title">Source Title</cite>
    33.         </small>
    34.       </footer>
    35.     </blockquote>
    36.   </div>
    37.   <div class="card text-center">
    38.     <div class="card-body">
    39.       <h5 class="card-title">Card title</h5>
    40.       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    41.       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    42.     </div>
    43.   </div>
    44.   <div class="card">
    45.     <img class="card-img" src="..." alt="Card image">
    46.   </div>
    47.   <div class="card p-3 text-right">
    48.     <blockquote class="blockquote mb-0">
    49.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    50.       <footer class="blockquote-footer">
    51.         <small class="text-muted">
    52.           Someone famous in <cite title="Source Title">Source Title</cite>
    53.         </small>
    54.       </footer>
    55.     </blockquote>
    56.   </div>
    57.   <div class="card">
    58.     <div class="card-body">
    59.       <h5 class="card-title">Card title</h5>
    60.       <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>
    61.       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    62.     </div>
    63.   </div>
    64. </div>

    Card columns can also be extended and customized with some additional code. Shown below is an extension of the .card-columns class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.

    1. .card-columns {
    2.   @include media-breakpoint-only(lg) {
    3.     column-count: 4;
    4.   }
    5.   @include media-breakpoint-only(xl) {
    6.     column-count: 5;
    7.   }
    8. }