Как сделать строки заданного размера в bootstrap?

Question

Моя цель

Привет всем, я не могу заставить это работать в bootstrap. Я прикрепил изображение в верхней части этого поста. У меня есть два столбца, оба 6, поэтому они занимают ровно половину строки. Однако с правой стороны у меня есть три строки, которые я бы хотел иметь равный размер набора, однако я не знаю, как лучше всего это сделать.

Вот краткий обзор того, как выглядит мой код (это просто формат, который я здесь ввел)

<div class= "row>
  <div class="col-6>
    ~IMAGE~
  </div>
  <div class="col-6">
    <div class="row">
      TEXT CONTENT
    </div>
    <div class="row">
      TEXT CONTENT
    </div>
    <div class="row">
      TEXT CONTENT
    </div>
  </div>
</div>

Это похоже на изображение, которое я разместил вверху, но строки не равны по размеру и колеблются в зависимости от текста. Спасибо!

Answer 1

Вы можете использовать flex в правом столбце для равномерного размещения строк внутри.

.col-6 {
  border: 1px solid black;
}

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
  <div class="col-6">
    This is where an image will go<br>
    This is where an image will go<br>
    This is where an image will go<br>
    This is where an image will go<br>
    This is where an image will go<br>
    This is where an image will go<br>
    This is where an image will go<br>
    This is where an image will go<br>
    This is where an image will go<br>
    This is where an image will go<br>
  </div>
  <div class="col-6 d-flex flex-column justify-content-around">
    <div class="row">
      TEXT CONTENT
    </div>
    <div class="row">
      TEXT CONTENT
    </div>
    <div class="row">
      TEXT CONTENT
    </div>
  </div>
</div>