跨越 bootstrap 4 卡组的标题

Question

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

        <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 包裹在弹性框 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

跨越 bootstrap 4 卡组的标题

Spanning the title of a bootstrap 4 card group

html

css

twitter-bootstrap

twitter-bootstrap-3

bootstrap-4