【Bootstrap V4系列】学习入门教程之 组件-卡片（Card）高级用法

一、Sizing 尺寸

卡片开始时没有特定的宽度，因此除非另有说明，否则它们将是100%宽的。您可以根据需要使用自定义CSS、网格类、网格Sass混入或实用程序进行更改。

1.1 Using grid markup 使用网格标记

使用网格，根据需要将卡片包裹在列和行中。

<!--Using grid markup-->
<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>

页面展示效果：

1.2 Using utilities 使用实用程序

使用我们为数不多的可用尺寸工具快速设置卡片的宽度。

<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>

页面展示效果：

1.3 Using custom CSS 使用自定义CSS

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

<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>

页面展示效果：

二、Text alignment 文本对齐方式

您可以使用我们的文本对齐类快速更改任何卡片的文本对齐方式，无论是整体还是特定部分。

<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-right" 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>

页面展示效果：

三、Navigation 导航

使用Bootstrap的导航组件为卡片的标题（或块）添加一些导航。

<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" 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">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>

页面展示效果：

<div class="card text-center"><div class="card-header"><ul class="nav nav-pills card-header-pills"><li class="nav-item"><a class="nav-link active" 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">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>

页面展示效果：