Наименование группы карт bootstrap 4 - PullRequest
Новая
       53

Наименование группы карт bootstrap 4

0 голосов
/ 13 апреля 2020

У меня есть 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>

enter image description here

1 Ответ

1 голос
/ 13 апреля 2020

Вы можете решить эту проблему, используя Flex box . Оберните .card-group div в div flex box, а затем переместите заголовок 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, вывод

...