无法使用引导程序正确间隔

Question

我正在尝试发布响应式博客文章。一切正常，但我不喜欢它的外观。当我的博客文章本身包含图片时，我想找到一个解决方案。在桌面版本上它不太明显，但是在移动设备上看起来很丑...我目前正在使用bootstrap 4，但是如果您使用CSS解决方案，我也将非常高兴！ 我需要图片上的内容：

台式机版本

移动版本

这是我的html +引导程序模型：

{% extends 'blog/base.html' %}
{% block content %}
  <article class="media content-section">
    <img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
    <div class="media-body">
      <div class="article-metadata">
        <a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">@{{ object.author }}</a>
        <small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>

        <div>
          <!-- category section -->
          <small class="text-muted">
            Categories:&nbsp;
            {% for category in post.categories.all %}
            <a href="{% url 'blog_category' category.name %}">
              {{ category.name }}
            </a>&nbsp;
            {% endfor %}
          </small>
        </div>

        {% if object.author == user %}
          <div>
            <a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.id %}">Update</a>
            <a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.id %}">Delete</a>
          </div>
        {% endif %}
      </div>

      <img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
      <h2 class="article-title text-center">{{ object.title }}</h2>
      <p class="article-content">{{ object.content }}</p>
    </div>
  </article>
{% endblock content %}

还有来自base.html块的一些代码：

<main role="main" class="container">
      <div class="row">
        <div class="col-md-8">
          {% if messages  %}
            {% for message in messages %}
              <div class="alert alert-{{ message.tags }}"> <!--grabbing bootstrap tag for displaying alert, info etc. -->
                {{ message }}
              </div>
            {% endfor %}
          {% endif %}
          {% block content %}{% endblock %}
        </div>
        <div class="col-md-4">
          <div class="content-section">
            <h3>Sidebar</h3>
            <p class='text-muted'>Explore smth new today!
              <ul class="list-group article-metadata">
                <li class="list-group-item list-group-item-light"><a class="author_title" href="{% url 'blog-home' %}">Latest Posts</a></li>
                <li class="list-group-item list-group-item-light"><a class="author_title" href="">Links</a></li>
                <li class="list-group-item list-group-item-light">Calendars</li>
                <li class="list-group-item list-group-item-light">etc</li>
              </ul>
            </p>
          </div>
        </div>
      </div>
    </main>

Answer 1

最后，我这样解决了这个问题：

{% extends 'blog/base.html' %}
{% block content %}
  <article class="media content-section">
    <img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
    <div class="article-metadata">
      <a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">@{{ object.author }}</a>
      <small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>

      <div>
        <!-- category section -->
        <small class="text-muted">
          Categories:&nbsp;
          {% for category in post.categories.all %}
          <a href="{% url 'blog_category' category.name %}">
            {{ category.name }}
          </a>&nbsp;
          {% endfor %}
        </small>
      </div>

      {% if object.author == user %}
        <div>
          <a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.slug %}">Update</a>
          <a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.slug %}">Delete</a>
        </div>
      {% endif %}
    </div>
  </article>
  <article class="media content-section">
    <div class="media-body">
      <img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
      <h2 class="article-title text-center">{{ object.title }}</h2>
      <p class="article-content">{{ object.content }}</p>
    </div>
  </article>
{% endblock content %}