Bootstrap 4 - Как добиться этого макета

Question

В настоящее время я работаю над веб-сайтом, и я столкнулся со следующей проблемой, думая, что лучше всего добиться следующего макета, используя Bootstrap 4. (завернутый в красный)

Как видите, первый столбец - col-md-7, а второй - col-md-5. Однако первый столбец содержит изображение, и оно должно касаться левого угла страницы. Однако правый столбец должен иметь стандартную ширину и размер столбца. Чтобы дать вам более глубокое понимание, вот чего я пытаюсь достичь:

[JS Fiddle][2]

Answer 1

Вам нужно будет обернуть левое изображение и правый столбец в ряд, установить ширину столбца для каждого, а затем поместить каждый элемент в правый столбец внутри этого div на полную ширину.

I Подумайте, если вы продолжите задавать вопросы «сделай это для меня» на ТАК, что вас поджарят, я знаю, что у меня есть. Но я здесь, чтобы помочь. ЛМК, если вы хотите больше деталей.

Существует миллион решений этой проблемы. Это было бы прекрасное время для изучения CSS Grid и изучения нового.

Вот кодекс общего подход

<div class="row">
  <div class="col-md-7 left-box"></div>

  <div class="col-md-5">
    <div class="col-md-12 item"></div>
    <div class="col-md-12 item"></div>
    <div class="col-md-12 item"></div>
  </div>  
</div>

Answer 2

Вы имеете в виду что-то подобное, используя align-self-start класс?

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.image {
  height: 200px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<div class="container">
  <div class="row d-flex">
    <div class="col image">
      Image
    </div>
    <div class="col align-self-start">
      Test
    </div>
  </div>
</div>