html - 如何使 bootstrap v4 卡组共享相同的 header

Question

我正在尝试使用 bootstrap v4 card-group为我的元素。我想将卡片标题添加到卡片组。

但是，.card-header 类应该添加到每张卡片中，我想知道是否有任何解决方案可以让同一行的卡片共享标题。

我附上了 codepen这里。例如，我只想显示一个共享的卡片标题 Topic。

谢谢!

Answer 1

我认为最好的方法是为此创建另一个类(它不会影响默认的 Bootstrap CSS)。

.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;
}

CODEPEN