Как я могу растянуть левый «ряд», чтобы заполнить левую сторону? я использую bootstrap

Question

<div class="container-fluid">
        <div class="row">
            <!-- Left side -->
            <div class="col-xl-10 style">
                <div class="row" >
                    <div class="col-xl-12 style">Box1</div>
                </div>
                <div class="row" >
                    <div class="col-xl-6 style">Box3</div>
                    <div class="col-xl-4 style">Box2</div>
                    <div class="col-xl-2 style">Box7</div>
                </div>
                <div class="row">
                    <div class="col-xl-3 style">Box4</div>
                    <div class="col-xl-9 style">Box5</div>
                </div>
            </div>
            <!-- Right side -->
            <div class="col-xl-2 style">Box 2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem iure sed recusandae hic laborum, quae earum doloremque illo alias explicabo rerum sequi corrupti magnam, ipsam laudantium cupiditate! Necessitatibus, aliquam eaque?</div>
        </div>
    </div> 

.style{
    background-color: rgb(220, 222, 238);
    border: 1px solid black; 
}

мне нужно растянуть боксы (1,2,3,4,5,7), чтобы box1 занимал половину высоты box6, а еще 2 строки с box3, box2, box7 и box4, box5 - 25 % за каждый

Answer 1

Что вам нужно сделать, это установить еще несколько классов для ваших элементов, чтобы они были целевыми (nth-child() может работать, если ваш макет остается прежним.).

Итак, я добавил .left и .right классов для ваших основных элементов.

Затем установите класс left в качестве flex родителя с направлением изгиба column.

Затем мы нацеливаемся на все rows с flex: 0 0 25%, что делает их всех 25% высоты. Я добавил класс в первый ряд с именем .half. Затем мы устанавливаем для свойств flex значение flex: 0 0 50%, что составляет половину высоты.

Я создал небольшую версию (используя классы col-sm-x), чтобы вы могли видеть ее при запуске сниппета. Ваш код во втором фрагменте.

.style {
  background-color: rgb(220, 222, 238);
  border: 1px solid black;
}

.left {
  display: flex;
  flex-direction: column;
}

.row {
  flex: 0 0 25%;
}

.row.half {
  flex: 0 0 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <!-- Left side -->
    <div class="col-sm-10 style left">
      <div class="row half">
        <div class="col-sm-12 style">Box1</div>
      </div>
      <div class="row">
        <div class="col-sm-6 style">Box3</div>
        <div class="col-sm-4 style">Box2</div>
        <div class="col-sm-2 style">Box7</div>
      </div>
      <div class="row">
        <div class="col-sm-3 style">Box4</div>
        <div class="col-sm-9 style">Box5</div>
      </div>
    </div>
    <!-- Right side -->
    <div class="col-sm-2 style right">Box 2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem iure sed recusandae hic laborum, quae earum doloremque illo alias explicabo rerum sequi corrupti magnam, ipsam laudantium cupiditate! Necessitatibus, aliquam eaque?</div>
  </div>
</div>

.style {
  background-color: rgb(220, 222, 238);
  border: 1px solid black;
}

.left {
  display: flex;
  flex-direction: column;
}

.row {
  flex: 0 0 25%;
}

.row.half {
  flex: 0 0 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <!-- Left side -->
    <div class="col-xl-10 style left">
      <div class="row half">
        <div class="col-xl-12 style">Box1</div>
      </div>
      <div class="row">
        <div class="col-xl-6 style">Box3</div>
        <div class="col-xl-4 style">Box2</div>
        <div class="col-xl-2 style">Box7</div>
      </div>
      <div class="row">
        <div class="col-xl-3 style">Box4</div>
        <div class="col-xl-9 style">Box5</div>
      </div>
    </div>
    <!-- Right side -->
    <div class="col-xl-2 style right">Box 2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem iure sed recusandae hic laborum, quae earum doloremque illo alias explicabo rerum sequi corrupti magnam, ipsam laudantium cupiditate! Necessitatibus, aliquam eaque?</div>
  </div>
</div>