如何使bootstrap v4卡组共享相同的标题

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