学习Corey Schafer Django教程(第3部分)遇HTML样式失效问题

Hey fellow learner, I ran into this exact styling display issue when working through Corey's Django Blog template section too—even after cloning his repo and running it with Django 3.0 (vs his Django 2.1 setup). After digging around, I found a reliable fix that requires 4 quick steps:

Step 1: Update Bootstrap Link in base.html #

Head to your base.html file, find the Bootstrap CSS link on line 11, and remove the integrity and crossorigin attributes. The updated line should look like this:

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

Step 2: Replace static/blog/main.css Code #

Overwrite the content of your main.css file with this complete code block to ensure all styling rules are correctly applied:

body { background: #fafafa; color: #333333; margin-top: 5rem; }
h1, h2, h3, h4, h5, h6 { color: #444444; }
ul { margin: 0; }
.bg-steel { background-color: #5f788a; }
.site-header .navbar-nav .nav-link { color: #cbd5db; }
.site-header .navbar-nav .nav-link:hover { color: #ffffff; }
.site-header .navbar-nav .nav-link.active { font-weight: 500; }
.content-section { background: #ffffff; padding: 10px 20px; border: 1px solid #dddddd; border-radius: 3px; margin-bottom: 20px; }
.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; }
.account-img { height: 125px; width: 125px; margin-right: 20px; margin-bottom: 16px; }
.account-heading { font-size: 2.5rem; }

Step 3: Update templates/blog/home.html Markup #

Replace the content of your home.html file with this corrected template code:

{% extends "blog/base.html" %}
{% block content %}
{% for post in posts %}
<article class="media content-section">
  <div class="media-body">
    <div class="article-metadata">
      <a class="mr-2" href="#">{{ post.author }}</a>
      <small class="text-muted">{{ post.date_posted }}</small>
    </div>
    <h2><a class="article-title" href="#">{{ post.title }}</a></h2>
    <p class="article-content">{{ post.content }}</p>
  </div>
</article>
{% endfor %}
{% endblock content %}

Step 4: Clear Browser Data & Restart Server #

• Stop your Django development server (Ctrl+C in the terminal)
• Clear your browser's entire cache, cookies, and site data (this ensures old styling files aren't cached)
• Restart the Django server with python manage.py runserver

That should fully resolve the styling display issues you're facing!

内容的提问来源于stack exchange，提问作者Al-Baraa El-Hag