Css Can'；使用bootstrap正确使用t空间

我想写一篇有回应性的博客文章。一切正常，但我不喜欢它的样子。我想有一个解决方案，当我的博客文章与图像本身将是中心。在桌面版上它不太显眼，但在移动设备上它看起来很难看。。。我目前正在使用Bootstrap4，但如果你有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 %}

{%extends'blog/base.html%}
{%block content%}
{{object.date{u posted}日期：“nd，Y”}
类别：
{post.categories.all%中的类别为%s}
{%endfor%}
{%if object.author==user%}
{%endif%}
{{object.title}}
{{{object.content}
{%endblock内容%}

以及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>

{%if消息%}
{消息%中的消息为%s}
{{message}}
{%endfor%}
{%endif%}
{%block content%}{%endblock%}
边栏
探索新的今天！



日历
等

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

{% 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 %}

{%extends'blog/base.html%}
{%block content%}
{{object.date{u posted}日期：“nd，Y”}
类别：
{post.categories.all%中的类别为%s}
{%endfor%}
{%if object.author==user%}
{%endif%}
{{object.title}}
{{{object.content}
{%endblock内容%}

您使用的模板语言是什么？您在哪里运行它？代码中有很多类，包括（但不限于）

文章img

&

媒体主体

。如果这些类别中的任何一个与样式相关，请包括它们的CSS@inpurforcolor

文章img

类仅用于设置图像样式，没有什么特殊，

媒体主体

是经典的引导类（）@Adriano我正在使用引导4和一点css进行样式设置。这就是全部。我所有的后端都在Django上framework@CODE正如我所说的，问题来自于如何构建

。由于所有内容都在

媒体正文

中，因此居中始终与div相对。因此，您可能需要更改布局，如

/*放置用户图标和标题信息*//*信息以及要居中的img*/

，以及更改css样式。