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