Bootstrap 4 - отображение карт в индивидуальном порядке

Question

Я пытаюсь создать правильный семантический HTML / CSS, основанный на Bootstrap 4, который бы отображал элементы карты определенным образом, не добавляя слишком много настраиваемых групп.

То, что у меня пока есть, таково:

<section class="section d-flex align-items-center">
  <div class="container">
    <div class="row news-block">
      <div class="col-md-5">
        <div class="card text-center pt-3 card-simple">
          <a href="#GO" class="click-overlay"></a>
          <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

          <div class="card-body">
            <h4 class="card-title">Test 1</h4>

          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="row">

          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple mb-4">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 2</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 3</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 4</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 5</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 6</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 7</h4>

              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>

Codepen, чтобы понять, что я имею в виду: https://codepen.io/wiwa-cloud/pen/rKxqYw?editors=1100

Чего бы я хотел достичь:

• то же расстояние (по вертикали и горизонтали)между всеми карточками
• «большая» карточка слева должна быть такой же высоты, как правая колонка с 6 карточками
• держать ее отзывчивой

Есть лихороший способ «начальной загрузки 4», или мне нужно много хакать?

Кроме того, я должен обернуть все в .card-deck и если да, то почему?(Я использую колоду карт, когда карты располагаются горизонтально на других пользовательских компонентах.)

Любые советы приветствуются.

Answer 1

он ответил, прежде чем я закончил, но вот еще одна версия того, что он сделал, ха-ха

<section class="section d-flex align-items-center">
  <div class="container-fluid px-0">
    <div class="row m-0 news-block pt-3 pl-3">
      <div class="col-md-5 mb-3 pl-0 pr-3 pr-md-0">
        <div class="card h-100 text-center pt-3 card-simple">
          <a href="#GO" class="click-overlay"></a>
          <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

          <div class="card-body">
            <h4 class="card-title">Test 1</h4>

          </div>
        </div>
      </div>
      <div class="col-md-7 pl-0 pl-md-3 pr-0">
        <div class="row mx-0">

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 2</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 3</h4>
              </div>
            </div>
          </div>

           <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 4</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 5</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 6</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 7</h4>
              </div>
            </div>
          </div>







        </div>
      </div>
    </div>
  </div>
</section>

https://codepen.io/chulps/pen/PaZgNO

Answer 2

Вы можете использовать вспомогательные классы Bootstrap 4 для настройки макета ...

• h-100, чтобы сделать левую карту полной высоты, чтобы соответствовать меньшим картам
• p-2 интервал (отступ) для выравнивания между столбцами

https://www.codeply.com/go/CPe58ZHi2u

<section class="section d-flex align-items-center">
  <div class="container">
    <div class="row news-block py-1">
      <div class="col-md-5 p-2">
        <div class="card text-center pt-3 card-simple h-100">
          <a href="#GO" class="click-overlay"></a>
          <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

          <div class="card-body">
            <h4 class="card-title">Test 1</h4>

          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="row">
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 2</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 3</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 4</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 5</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 6</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 7</h4>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Также вместо * можно использовать p-31018 * если вы хотите больший желоб.