django - Django模板侧边栏未按应有的方式呈现
问题描述
在 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>
注册.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 %}
视图.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 样式表在 base.html 中被引用,并且在除此页面之外的所有其他页面上都可以正常工作。在其他页面中,侧栏正确呈现在页面的右侧。
解决方案
问题是缺少一个 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 %}
推荐阅读
- html - 如何将复选框与字段集中的标签对齐?
- google-chrome - 将浏览器扩展的 CORS 策略列入白名单?
- mysql - MySQL 使用 Group by 和两个连接表 - 简单
- css - 为什么子 div *有时* 不能完美地填充父 div?
- r - 在时间序列ggplot2中更改线型
- python - Tensorflow 安装混乱
- unity3d - Unity Fungus Flowchart 没有收到我的脚本的消息
- azure - 错误 401 azure ad b2c - 谷歌/linkedin
- amazon-s3 - 如何使用 AWS S3 上传文件 - Angular 8
- php - 尝试双重过滤sql查询数据laravel