0

Нужно по такому "макету" сверстать на бутстрапе введите сюда описание изображения

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

<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>

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

2 ответа 2

0

Вам в 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>

0

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.