Добавьте место к вертикально центрированным загрузочным 4 картам

Question

Я пытаюсь получить поле между картами в среднем столбце, как это делается для карт в правом и левом столбцах. Добавление верхнего края и / или нижнего поля в класс карты не сработало. Ни один не сделал добавление возврата. Единственное, что подошло ближе, это часы, но это дает вертикальную линию по обе стороны от карт, как вы можете видеть. Есть предложения?

<div class="container">
<div class="row align-items-center">
    <div class="col-4">
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
    </div>
    <div class="col-4">
        <div class="card">
            <div class="card-body">
                <h2 class="card-title">Taller</h2>
                <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
                <a href="#" class="btn btn-default-drk">Link To</a>
         </div>
<hr>
        <div class="card">
            <div class="card-body">
                <h2 class="card-title">Taller</h2>
                <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
                <a href="#" class="btn btn-default-drk">Link To</a>
         </div>
<hr>
        <div class="card">
            <div class="card-body">
                <h2 class="card-title">Taller</h2>
                <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
                <a href="#" class="btn btn-default-drk">Link To</a>
         </div>
        </div>
    </div>
</div>
</div>

    <div class="col-4">
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
        <div class="card card-body mb-3">Center</div>
    </div>
</div>

Answer 1

Вы не закрывали некоторые "более высокие" дивы. Как только вы закроете это и добавите класс «mb-3» к карточкам, проблема будет решена.

<div class="card mb-3">
     <div class="card-body">
            <h2 class="card-title">Taller</h2>
            <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
            <a href="#" class="btn btn-default-drk">Link To</a>
     </div>
</div>
<div class="card mb-3">
        <div class="card-body">
            <h2 class="card-title">Taller</h2>
            <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
            <a href="#" class="btn btn-default-drk">Link To</a>
        </div>
</div>

<div class="card mb-3">
        <div class="card-body">
            <h2 class="card-title">Taller</h2>
            <h4 class="card-text">With supporting text below as a natural lead-in to additional content.</h4>
            <a href="#" class="btn btn-default-drk">Link To</a>
        </div>
</div>