Как установить цвет фона карты Bootstrap для всего столбца?

Question

У меня есть задание о Bootstrap карточной колоде. Я создаю колоду карт из двух карт подряд. На первой карточке у меня есть текст под заголовком, а на второй карточке нет текста под заголовком. В этом случае серый цвет не заполняет всю карту, как вы можете видеть в примере. Как я могу это исправить, чтобы столбик отверстия тоже был серым?

Спасибо за вашу помощь!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">

<div class="card-deck mb-5">
  <a href="#" class="card hoverable">
    <div class="card-body p-0">
      <div class="row mx-0">
        <div class="col-md-8 grey lighten-4 rounded-left pt-2">
          <h5 class="font-weight-bold">Header</h5>
          <p class="font-weight-light text-muted mb-2">Some text</p>
        </div>
        <div class="col-md-4 text-center pt-3">
          <p class="h2 font-weight-normal">60</p>
        </div>
      </div>
    </div>
  </a>
  <a href="#" class="card hoverable">
    <div class="card-body p-0">
      <div class="row mx-0">
        <div class="col-md-8 grey lighten-4 rounded-left pt-2">
          <h5 class="font-weight-bold">Header</h5>
          <!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
        </div>
        <div class="col-md-4 text-center pt-3">
          <p class="h2 font-weight-normal">50</p>
        </div>
      </div>
    </div>
  </a>
</div>

Answer 1

Если вы хотите, чтобы высота была равна контейнеру, вы можете использовать h-100 в div row mx-0. Более подробную информацию можно найти здесь: https://getbootstrap.com/docs/4.0/utilities/sizing/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">

<div class="card-deck mb-5">
  <a href="#" class="card hoverable">
    <div class="card-body p-0">
      <div class="row mx-0">
        <div class="col-md-8 grey lighten-4 rounded-left pt-2">
          <h5 class="font-weight-bold">Header</h5>
          <p class="font-weight-light text-muted mb-2">Some text</p>
        </div>
        <div class="col-md-4 text-center pt-3">
          <p class="h2 font-weight-normal">60</p>
        </div>
      </div>
    </div>
  </a>
  <a href="#" class="card hoverable">
    <div class="card-body p-0">
      <div class="row h-100 mx-0">
        <div class="col-md-8 grey lighten-4 rounded-left pt-2">
          <h5 class="font-weight-bold">Header</h5>
          <!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
        </div>
        <div class="col-md-4 text-center pt-3">
          <p class="h2 font-weight-normal"></p>
        </div>
      </div>
    </div>
  </a>
</div>

Answer 2

Использование тега привязки, так как он не учитывает высоту и ширину, поэтому вы должны установить класс в теле карты, используя это class = "card-body p-0 grey lighten-4" .

Удалить класс "grey lighten-4" из class = "col-md-8 округленный влево pt-2" и установить в class = "card-body p-0 grey lighten -4 "

.grey {
    background-color: #f5f5f5 !important;
}

/*OR*/


.grey.lighten-4 {
    background-color: #f5f5f5 !important;
}


<div class="card-deck mb-5">
  <a href="#" class="card hoverable">
    <div class="card-body p-0 grey lighten-4">
      <div class="row mx-0">
        <div class="col-md-8 rounded-left pt-2">
         ...
        </div>
        <div class="col-md-4 text-center pt-3">
         ...
        </div>
      </div>
    </div>
  </a>  
</div>

Answer 3

В идеале вы не должны играть с левыми / правыми полями строк и столбцов в bootstrap. Вы должны использовать no-gutters класс с row, чтобы получить желаемый эффект. Кроме того, вы должны добавить h-100 во второй ряд, чтобы занять полную высоту. Также лучший способ выровнять ваш номер по центру, как я сделал в фрагменте, используя justify-content-center d-flex align-items-center.

Также в вашем коде отсутствовал элемент container, поэтому полоса прокрутки появлялась в вашем фрагменте. Я тоже это добавил.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="container">
  <div class="card-deck mb-5">
    <a href="#" class="card hoverable">
      <div class="card-body p-0">
        <div class="row h-100 no-gutters">
          <div class="col-md-8 grey lighten-4 rounded-left">
            <h5 class="font-weight-bold p-2">Header</h5>
            <p class="font-weight-light text-muted mb-2 px-2">Some text</p>
          </div>
          <div class="col-md-4 text-center justify-content-center d-flex align-items-center">
            <p class="h2 font-weight-normal">60</p>
          </div>
        </div>
      </div>
    </a>
    <a href="#" class="card hoverable">
      <div class="card-body p-0">
        <div class="row h-100 no-gutters">
          <div class="col-md-8 grey lighten-4 rounded-left">
            <h5 class="font-weight-bold p-2">Header</h5>
            <!-- <p class="font-weight-light text-muted mb-2  px-2">No text</p> -->
          </div>
          <div class="col-md-4 text-center justify-content-center d-flex align-items-center">
            <p class="h2 font-weight-normal">50</p>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

Пожалуйста, проверьте различия в кодах https://i.stack.imgur.com/0Q2IX.png