Боковая панель шаблона Django не отображается должным образом - PullRequest
Новая
       26

Боковая панель шаблона Django не отображается должным образом

0 голосов
/ 29 апреля 2019

В проекте 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 '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 упоминается в файле base.html и прекрасно работает на всех других страницах, кроме этой.На других страницах боковая панель отображается правильно с правой стороны страницы.

1 Ответ

0 голосов
/ 29 апреля 2019

Проблема была в пропущенном 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 %}
...