跨越 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

您可以使用弹性框解决此问题。将 .card-group div 包裹在弹性框 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) 时，标题 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