Bootstrap сетка

Question

Нужно по такому "макету" сверстать на бутстрапе

Написал такой код:

<div class="container">
        <div class="row ">

            <div class="col-6 "> </div>

            <div class="col-6">
                <div class="row">
                    <div class="col-6"></div>
                    <div class="col-6"></div>
                </div>
                <div class="row">
                    <div class="col-4"></div>
                    <div class="col-4"></div>
                    <div class="col-4"></div>
                </div>
                <div class="row">
                    <div class="col-6"></div>
                    <div class="col-6"></div>
                </div>
            </div>

        </div>

    </div>

Почему он не работает так, как на макете, ведь вроде бы ограничений на такие вложения в бутстрапе нет, но получается такое: Ну и если так делать нельзя, то каким образом можно решить эту проблему, используя только бутстрап. Т.е вопрос состоит в том, как вытянуть первый столбец строки и возможно ли это вообще технически?

Answer 1

Вам в css нужно обратить внимание только на flex-block
Если у вас bootstrap 4 и выше, то у него уже должны быть в сборке эти стили в файле grid.scss
Только таким образом можно выровнять по высоте.

Уже есть ответ - Как сделать карточки в bootstrap 4 одинаковой высоты

.col-6 {
  width: 49.4%;
}
.col {
  border: 1px solid #000;
  display: block;
  min-height: 30px;
  float: left;
}
.col-4 {
  width: 32.8%;
}
.flex-block {
  display: flex;
  flex-wrap: wrap;
}

<div class="container">
        <div class="row flex-block">

            <div class="col col-6 "> </div>

            <div class="col col-6">
                <div class="row">
                    <div class="col col-6"></div>
                    <div class="col col-6"></div>
                </div>
                <div class="row">
                    <div class="col col-4"></div>
                    <div class="col col-4"></div>
                    <div class="col col-4"></div>
                </div>
                <div class="row">
                    <div class="col col-6"></div>
                    <div class="col col-6"></div>
                </div>
            </div>

        </div>

    </div>

Answer 2

Только Bootstrap, align-items-stretch для растягивания

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="container">
  <div class="row align-items-stretch">
    <div class="col-6 bg-primary">1</div>
    <div class="col-6">
      <div class="row">
        <div class="col-6 bg-warning">2</div>
        <div class="col-6 bg-info">3</div>
      </div>
      <div class="row">
        <div class="col-4 bg-info">4</div>
        <div class="col-4 bg-danger">5</div>
        <div class="col-4 bg-warning">6</div>
      </div>
      <div class="row">
        <div class="col-6 bg-warning">7</div>
        <div class="col-6 bg-info">8</div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Bootstrap сетка

Ответы (2 шт):