boostrap4: как сопоставить карты по высоте и обеспечить правильные точки останова?

Question

У меня есть группа кнопок внутри нижнего колонтитула моих карт, которая занимает некоторое место.Раньше я помещал каждую отдельную карту в div следующим образом:

  <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3"></div>

Однако теперь я хочу убедиться, что карты имеют одинаковую высоту.Я пытался сделать это с помощью карточных колод.Я смог правильно подобрать высоту, но теперь карты слишком долго остаются рядом, и группа кнопок выходит за пределы карты.Вот как это выглядит:

Я попытался добавить материал col-12 в тег карты следующим образом:

  <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col"></div>

Это ничего не сделало, к сожалению.Как мне достичь обеих целей: одинаковой высоты и достаточной ширины для группы кнопок?

В частности, я хочу иметь возможность использовать функцию высоты колоды карт в сочетании с системой сетки Bootstrap, чтобы колонки начиналисьвот так:

||||

Тогда станьте этим:

||
||

Затем наконец станьте этим:

|
|
|
|

РЕДАКТИРОВАТЬ - полный код:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="row card-deck">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Date</h6>
      <p class="card-text">Description</p>
    </div>
    <div class="card-footer">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary viewActivity">View</button>
        <button type="button" class="btn btn-success editActivity">Edit</button>
        <button type="button" class="btn btn-danger deleteActivity">Delete</button>
      </div>
    </div>
  </div>
</div>

Решение

   

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
  <style>
    .card{
    height:100%;
    }
    </style>

      <div class="row">
         <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col mb-3">
      <div class="card">
      <div class="card-body">
        <h5 class="card-title"></h5>
    	<h6 class="card-subtitle mb-2 text-muted"></h6>
        <p class="card-text"></p>
      </div>
    <div class="card-footer">
    	<div class="btn-group" role="group">
    	  <button type="button" class="btn btn-primary viewActivity">View</button>
    	  <button type="button" class="btn btn-success editActivity">Edit</button>
    	  <button type="button" class="btn btn-danger deleteActivity">Delete</button>
    	</div>
      </div>
      </div>
      </div>
      </div>

Answer 1

Проблема, с которой вы столкнулись, связана с заполнением по умолчанию для .card-footer & .btn, вы можете переопределить эти отступы, чтобы получить чистый вид, где вы боретесь, то есть между 576px и 700px;

рабочий фрагмент ниже:

.card-footer {
  text-align: center !important;
  padding: .75rem 0 !important;
}

@media screen and (min-width:576px) and (max-width:700px) {
  .btn {
    padding: .375rem 0.3rem !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="row card-deck">
  <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 card-col">
    <div class="card-body">
      <h5 class="card-title">Long Title that (we have)</h5>
      <h6 class="card-subtitle mb-2 text-muted">Date</h6>
      <p class="card-text">Description</p>
    </div>
    <div class="card-footer">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary viewActivity">View</button>
        <button type="button" class="btn btn-success editActivity">Edit</button>
        <button type="button" class="btn btn-danger deleteActivity">Delete</button>
      </div>
    </div>
  </div>

  <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 card-col">
    <div class="card-body">
      <h5 class="card-title">Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Date</h6>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla laborum</p>
    </div>
    <div class="card-footer">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary viewActivity">View</button>
        <button type="button" class="btn btn-success editActivity">Edit</button>
        <button type="button" class="btn btn-danger deleteActivity">Delete</button>
      </div>
    </div>
  </div>

  <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 card-col">
    <div class="card-body">
      <h5 class="card-title">Medium Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Date</h6>
      <p class="card-text">Description</p>
    </div>
    <div class="card-footer">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary viewActivity">View</button>
        <button type="button" class="btn btn-success editActivity">Edit</button>
        <button type="button" class="btn btn-danger deleteActivity">Delete</button>
      </div>
    </div>
  </div>
</div>

Поместите тег стиля после bootstrap.css на своей странице, чтобы избежать размещения !important (который мне пришлось поместить здесь, чтобы воссоздать исправление)

обновление : в свете комментария опрашивающего ниже

.card-footer {
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid ">
  <div class="row ">
    <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col">
      <div class="card-body">
        <h5 class="card-title">Long Title that (we have)</h5>
        <h6 class="card-subtitle mb-2 text-muted">Date</h6>
        <p class="card-text">Description</p>
      </div>
      <div class="card-footer">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary viewActivity">View</button>
          <button type="button" class="btn btn-success editActivity">Edit</button>
          <button type="button" class="btn btn-danger deleteActivity">Delete</button>
        </div>
      </div>
    </div>

    <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col">
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Date</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla laborum</p>
      </div>
      <div class="card-footer">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary viewActivity">View</button>
          <button type="button" class="btn btn-success editActivity">Edit</button>
          <button type="button" class="btn btn-danger deleteActivity">Delete</button>
        </div>
      </div>
    </div>

    <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col">
      <div class="card-body">
        <h5 class="card-title">Medium Title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Date</h6>
        <p class="card-text">Description</p>
      </div>
      <div class="card-footer">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary viewActivity">View</button>
          <button type="button" class="btn btn-success editActivity">Edit</button>
          <button type="button" class="btn btn-danger deleteActivity">Delete</button>
        </div>
      </div>
    </div>

    <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col">
      <div class="card-body">
        <h5 class="card-title">Medium Title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Date</h6>
        <p class="card-text">Description</p>
      </div>
      <div class="card-footer">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary viewActivity">View</button>
          <button type="button" class="btn btn-success editActivity">Edit</button>
          <button type="button" class="btn btn-danger deleteActivity">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>