Html 如何使引导v4卡组共享同一标头

我正在尝试在我的项目中使用引导v4。 我想把卡片头添加到卡片组中

但是，应该将

.card header

类添加到每个卡中，我想知道是否有任何解决方案使同一行中的卡共享头

我在这里附上了这张照片。例如，我只想显示一个共享卡头

Topic

---

谢谢

您需要将

卡头

移动到

卡组

的根目录中，然后将

显示

更改为

表标题

，仅适用于

卡组

的直接子项

---

我认为最好的方法是为它创建另一个类（它不会影响默认的引导CSS）

---

您可以将

卡头

移动到

卡组

@makshh oh！非常感谢。但是我发现有一个很小的边界半径差异，这使得标题很难看。。。。我想我可能需要更多的css来调整它。无论如何，谢谢你。

<div class="card-group">
  <div class="card-header">Topic</div>
  ...
</div>

.card-group > .card-header{
  display: table-caption;
}

.card-header-custom {
  border-radius: .25rem .25rem 0 0;
  padding: .75rem 1.25rem;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-bottom: none;
}
.card-header-custom + .card-group > .card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}