boostrap - равные высоты столбца && равные строки высота внутри вложенного столбца

Question

Доброе утро,

Я не понял, как сделать трюк с этим макетом .Может, кто-нибудь может помочь?

Я пытался сделать это с помощью этих трюков, но это не сработало

    <div class="row row-eq-height">
      <div className='col-md-2'>
        height = 3*y
      </div>
      <div className='col-md-10 '>
        <div>
          A  - height = y
        </div>
        <div>
          B - height = y
        </div>
        <div>
          C - height = y
        </div>
      </div>
    </div>

.css

    .row-eq-height {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

спасибо за вашу помощь!!!! * * 1013

Answer 1

ответ

.css

li3 {
  display: flex;
  justify-content: left;
  align-items:center;
  width: 100%;
  height: 33.33333%;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.js

<div class="row row-eq-height">
  <div className='col-md-2'>
    height = 3*y<br/>
    height = 3*y<br/>
    height = 3*y<br/>

    height = 3*y<br/>
    height = 3*y<br/>
    height = 3*y<br/>

    height = 3*y<br/>
    height = 3*y<br/>
    height = 3*y<br/>
  </div>
  <div className='col-md-10 '>
    <li3>
      A  - height = y
    </li3>
    <li3>
      B - height = y
    </li3>
    <li3>
      C - height = y
    </li3>
  </div>
</div>