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

Answer 2

您需要将.card-header移到.card-group的根目录中，然后将display更改为table-caption，仅适用于{{1}的直接子项}}

Demo

.card-group

的CSS

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

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

2 个答案:

CODEPEN