Показать изображение рядом с текстом с помощью CSS/Bootstrap и django jinja 2

Я хочу показать изображение рядом с текстом. Но оно отображается под ним. Вот код

<div class="container">  
  <div class="row">
        <div class="col-md-8">
            <h1>This is my first post</h1>
            <div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard …   
        </div>
        <div class="col-md-4">
            <img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail" >
        </div>
        <div><a href="/blog/first-post" >Read More..</a></div>
        
        <div class="col-md-8">
            <h1>this is second post</h1>
            <div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard …   
        </div>
        <div class="col-md-4">
            <img src="/media/post/0a61bddab956.png" class="img-thumbnail" >
        </div>
        <div><a href="/blog/2nd-post" >Read More..</a></div>
  </div> 
</div>

Вот как это выглядит enter image description here

РЕДАКТ. Я скопировал это из view-source и часть текста там обрезана. На самом деле я использую код шаблона Django jina 2

{% for post in context %}
<div class="col-md-8">
    <h1>{{ post.title}}</h1>
    {{ post.content |truncatewords:20 | safe}}   
</div>
<div class="col-md-4">
    <img src="/media/{{post.image}}" class="img-thumbnail" >
</div>
<div><a href="/blog/{{post.slug}}" >Read More..</a></div>
{% endfor %}

Вот код файла base.html

<div class="container">  
  <div class="row">
{%block content %}

{%endblock%}
  </div> 
</div>

Я думаю, что truncatewords:20 вызывает проблему.

Замена на truncatewords_html:20 решила проблему

Используйте класс d-inline для изображения и текста.

Проблема в том, что в своем HTML Code вы не закрыли div из class col-md-8

Проверьте код на большом экране, текст и изображение находятся рядом друг с другом

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <h1>This is my first post</h1>
      <div>
        <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard …
      </div>
    </div>
      <div class="col-md-4">
        <img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail">
      </div>
      <div><a href="/blog/first-post">Read More..</a></div>

      <div class="col-md-8">
        <h1>this is second post</h1>
        <div>
          <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard …
        </div>
    </div>
        <div class="col-md-4">
          <img src="/media/post/0a61bddab956.png" class="img-thumbnail">
        </div>
        <div><a href="/blog/2nd-post">Read More..</a></div>
      </div>
    </div>

Я думаю, что class="row" не должен содержать col сумму больше 12. Переформатируйте ваш код, как показано ниже.

<div class="container">  
    <div class="row">
        <div class="col-md-8">
            <h1>This is my first post</h1>
            <div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard …   
        </div>
        <div class="col-md-4">
            <img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail" >
        </div>
    </div>
    <div><a href="/blog/first-post" >Read More..</a></div>
    <div class="row">
        <div class="col-md-8">
            <h1>this is second post</h1>
            <div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard …   
        </div>
        <div class="col-md-4">
            <img src="/media/post/0a61bddab956.png" class="img-thumbnail" >
        </div>
    </div>
    <div><a href="/blog/2nd-post" >Read More..</a></div>
</div>
Вернуться на верх