Bootstrap столбцов - перенос текста в столбец справа от изображения

Question

Все, что мне нужно, это иметь большой блок текста в правой части изображения. Это сводит меня с ума. Столбец, содержащий текст, опускается ниже изображения, как только текст становится определенного размера или не имеет ширины, одно из решений - добавить ширину к текстовому столбцу, но это не точка bootstrap, чтобы не использовать фиксированную ширину! ?

Все, что у меня есть на css P, - это перенос слов: break-word; Я добавил высоту изображения, так как оно слишком велико - хотелось бы ограничить размер изображения размером столбца bootstrap, если это также возможно. Я перепробовал все различные комбинации css. Извините, это, наверное, обычный вопрос, я видел много ответов на него и перепробовал все. Как создать два столбца подряд, один с изображением, а другой с текстом ?! Это должно быть просто! (и, наверное, есть!). Спасибо и извините. nb я участвую в проекте laravel с загруженным bootstrap и доступным css.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">

<div id="banner" class="12u" >
    <div class="container">
        <div class="row">
            <div class="col-4">
                <img src="{{ asset('images/fun.jpeg') }}" alt="Picture" height="400em" >
            </div>
            <div class="col-8">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
            </div>
        </div>
    </div>
</div>

Answer 1

Я добавил класс img-fluid, чтобы изображение было отзывчивым. img-fluid класс, выполняющий ширину изображения: 100% и высоту: авто. Таким образом, изображение перемещается согласно контейнеру, в котором оно находится.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">

<div id="banner" class="12u">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="Picture" height="400em">

      </div>
      <div class="col-8">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
      </div>
    </div>
  </div>
</div>

Answer 2

Вы все делаете правильно, но не включаете width="100%" в свой img тег

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div id="banner" class="12u" >
    <div class="container">
        <div class="row">
            <div class="col-4">
                <img width="100%" src="https://images.unsplash.com/photo-1590412513773-fa30db27b485?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Picture">
            </div>
            <div class="col-8">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
            </div>
        </div>
    </div>
</div>