Django模板侧边栏不能正常渲染

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django模板侧边栏不能正常渲染相关的知识,希望对你有一定的参考价值。

在Django项目中,我有一个侧栏不能在正确的位置渲染。与其他具有相似内容的页面一样,不是出现在内容的右侧,这种情况下的侧栏位于最底层。我无法弄清楚如何移动它,并在base.html中尝试了各种各样的东西并移动了Django模板语言块内容。

渲染模板(register.html)如下所示:

enter image description here

根据教程,它应该是这样的:

enter image description here

base.html的相关部分

<!--this is django templating language-->
<link rel="stylesheet" href="{% static 'worldguestbookmain2.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.朋友

#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})

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

答案

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

register.html页面可以重写如下。请注意div,其中一个缺失。我也整理了有助于缩进的缩进。

{% 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 博客开发教程 10 - 页面侧边栏:使用自定义模板标签

Django---进阶15

Django 中的 Ajax 侧边栏

(WP) 页脚未显示在新的单个模板和第二个侧边栏中

基于Adminlte 使用Flask模板功能解决侧边栏(siderbar)不激活问题

Xamarin 表单 - 侧边菜单左侧栏、片段和列表视图