跨越 bootstrap 4 卡组的标题

Question

我有一个带有标题的引导卡组。目前，标题在一张卡片内，但我希望它跨越卡片组。如何做到这一点？

        <div class="card-group">
            <div class="card border-right-0 border-top-0">
                <div class="card-header bg-white border-bottom-0 h5 font-weight-light">Project Status Overview</div>
                <div class="card-body">
                    <h1 class="card-text text-primary text-center">@ViewBag.ActiveProjects</h1>
                    <p class="card-title text-center font-weight-bold">Active Projects</p>
                </div>
            </div>
            <div class="card border-right-0 border-top-0">
                <div class="card-header bg-white border-bottom-0 h5 font-weight-light">&nbsp;</div>
                <div class="card-body">
                    <h1 class="card-text text-secondary text-center">@ViewBag.ArchivedProjects</h1>
                    <p class="card-title text-center font-weight-bold">Archived Projects</p>
                </div>
            </div>
            <div class="card border-right-0 border-top-0">
                <div class="card-header bg-white border-bottom-0 h5 font-weight-light">&nbsp;</div>
                <div class="card-body">
                    <h1 class="card-text text-warning text-center">3</h1>
                    <p class="card-title text-center font-weight-bold">Pending Dimensions</p>
                </div>
            </div>
            <div class="card border-top-0">
                <div class="card-header bg-white border-bottom-0 h5 font-weight-light">&nbsp;</div>
                <div class="card-body">
                    <h1 class="card-text text-success text-center">32</h1>
                    <p class="card-title text-center font-weight-bold">Estimates Available</p>
                </div>
            </div>
        </div>

Answer 1

您可以使用Flex box 解决此问题。将.card-group div 包裹在一个flex box div 中，然后将标题div 移到.card-group div 之外。

例子

<div class="d-flex flex-column">
  <div class="bg-white border-bottom-0 h5 font-weight-light">title</div>
  <div class="card-group"><!-- cards here --></div>
</div>

使用display: flex; (.d-flex) 时，title div 将与.card-group div 对齐。

解决方案：

  <div class="d-flex flex-column">
    <div class="bg-white border-bottom-0 h5 font-weight-light">Project Status Overview</div>
    <div class="card-group">
      <div class="card border-right-0 border-top-0">
        <div class="card-body">
          <h1 class="card-text text-primary text-center">23</h1>
          <p class="card-title text-center font-weight-bold">Active Projects</p>
        </div>
      </div>
      <div class="card border-right-0 border-top-0">
        <div class="card-body">
          <h1 class="card-text text-secondary text-center">5</h1>
          <p class="card-title text-center font-weight-bold">Archived Projects</p>
        </div>
      </div>
      <div class="card border-right-0 border-top-0">
        <div class="card-body">
          <h1 class="card-text text-warning text-center">3</h1>
          <p class="card-title text-center font-weight-bold">Pending Dimensions</p>
        </div>
      </div>
      <div class="card border-top-0">
        <div class="card-body">
          <h1 class="card-text text-success text-center">32</h1>
          <p class="card-title text-center font-weight-bold">Estimates Available</p>
        </div>
      </div>
    </div>
  </div>

此处为 Jsbin 示例：https://jsbin.com/xeyiroyasa/edit?html,output