Question

我的.article-metadata和.article-content似乎在作为博客文章容器的媒体主体之外的内容中溢出。

我正在创建一个带有引导程序和flask的博客网站。烧瓶部分工作正常，但我的显示有点古怪。我尝试过的事情弄乱了Web开发人员工具中的不同引导类。但是它们似乎都没有覆盖指向该行为的类。

main.css的适用部分：


.content-section-main {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.content-section-sidebar {

}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

blog.html的适用部分：

{% extends "layout.html" %}
{% block content %}
    {% for post in posts %}
        <article class="media content-section-main bg-light">
          <img class="rounded-circle article-img" src="{{ url_for('static', filename='profile_pics/' + post.author.image_file) }}">
          <div class="media-body">
            <div class="article-metadata">

              <span class="icon ">
                <i class="fas fa-user"></i>
              </span>
              <a class="mr-2" href="{{ url_for('about') }}">{{ post.author.username }}</a>

              <span class="icon ">
                <i class="fas fa-calendar"></i>
              </span>
              <a class="mr-2 text-muted">{{ post.date_posted.strftime('%Y-%m-%d') }}</a>

              <span class="icon ">
                <i class="fas fa-tags"></i>
              </span>
              <a class="mr-2 text-muted">{{ post.tags }}</a>

            </div>
            <h2><a class="article-title" href="#">{{ post.title }}</a></h2>
            <img src="{{ post.image }}" width="100%" height=auto>
            <p class="article-content">{{ post.content }}</p>
          </div>
        </article>
    {% endfor %}
{% endblock content %}

layout.html的适用部分：

<main role="main" class="container">
      <div class="row">
        <div class="col-md-8">
         {% block content %}{% endblock %}
        </div>
      </div>
</main>

我希望内容保留在.article-metadata和.article-content部分中……但是它用光了，而不是像在容器中放置博客文章那样将其包装。 >

引导程序中是否有办法阻止我的.article-metadata和.article-content从媒体主体溢出？

0 个答案: