Django 模板侧边栏未按应有的方式呈现

Question

在 Django 项目中，我有一个侧边栏没有在正确的位置呈现。在这种情况下，侧边栏位于最底部，而不是像其他具有相似内容的页面那样出现在内容的右侧。我不知道如何移动它，并在 base.html 中尝试了各种方法并在 Django 模板语言块内容中移动。

呈现模板 (register.html) 如下所示：

然而，根据教程，它应该看起来像这样：

base.html

的相关部分

<!--this is django templating language-->
<link rel="stylesheet" href="{% static 'worldguestbook\main2.css' %}"/>

</head>
<body>

<header class="site-header">
  <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
    <div class="container">
      <a class="navbar-brand mr-4" href="/">FakeBook Newsfeed</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarToggle">
        <div class="navbar-nav mr-auto">
          <a class="nav-item nav-link" href="{% url 'socialmedia-home' %}">Home</a>
          <a class="nav-item nav-link" href="{% url 'socialmedia-about' %}">About</a>
        </div>
        <!-- Navbar Right Side -->
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="{% url 'socialmedia-login' %}">Login</a>
          <a class="nav-item nav-link" href="#">Register</a>
        </div>
      </div>
    </div>
  </nav>
</header>

register.html

{% extends "socialmedia/base.html" %}
{% block content %}

    <div class="content-section">
    <form method="POST">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">Hello: Register today!</legend>
        {{form.as_p}}
    </fieldset>
    <div class="form-group">
        <button class="btn btn-outline-info" type="submit">Register</button>
    </form>
    <div class="border-top pt-3">
        <small class="text-muted">Signed up already? <a class="ml-2" href="#">Login</a> here</small>
    </div>
{% endblock content %}

views.py

#USERS (register) view.py

from django.shortcuts import render
from django.contrib.auth.forms import UserCreationForm
# Create your views here.

def register(request):
    form = UserCreationForm()
    return render(request, 'users/register.html',{'form':form})

请注意 main2.css 样式 sheet 在 base.html 中被引用并且在除此页面之外的所有其他页面上都可以正常工作。在其他页面中，边栏在页面右侧正确呈现。

Answer 1

问题是缺少 div，这完全没有引起我的注意。

register.html页面可以改写如下。请注意 divs，其中一个丢失了。我还整理了缩进，这很有帮助。

{% extends "socialmedia/base.html" %}
{% block content %}
    <div class="content-section">
        <form method="POST">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">Hello: Register today!</legend>
            {{form.as_p}}
        </fieldset>
    <div class="form-group">
        <button class="btn btn-outline-info" type="submit">Register</button>
    </div>
    </form>
    <div class="border-top pt-3">
        <small class="text-muted">
            Signed up already? <a class="ml-2" href="#">Login</a>
            </small>
        </div>
    </div>
{% endblock content %}

Django 模板侧边栏未按应有的方式呈现

Django template sidebar not rendering as it should

django

templates

styles

extends

base