Я включил нижний колонтитул bootstrap в свой базовый шаблон django (base. html) вместе с нумерацией страниц.
Когда я запускаю сервер django, нижний колонтитул кажется уменьшенным в направлении влево ([1]: https://i.stack.imgur.com/1XyKN.png), затем при щелчке на нумерации страниц нижний колонтитул отображается нормально с полной шириной ().
База. html
{% load static%}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block head_title %} Blog {% endblock head_title %}</title>
<link rel="stylesheet" href='{%static "css/base.css"%}'>
<style>
{% block style %}
#main_nav {
background-color: white;
box-shadow: 5px 10px 20px -20px rgba(85, 172, 238, 1);
margin-left: auto;
margin-right: auto;
}
.navbar-toggler {
color: #1c2331;
}
#Create_Post {
border-radius: 22.5px;
background-color: #ffffff;
border-color: black;
border-width: 2px;
}
#Create_Post:hover {
border-color: #007bff;
}
#tag_button {
border-radius: 22.5px;
background-color: #ffffff;
border-color: black;
border-width: 2px;
}
#tag_button:hover {
border-color: #007bff;
}
#no_results {
margin-left: auto;
margin-right: auto;
}
#pagination {
margin-left: auto;
margin-right: auto;
}
#pagination-link {
font-size: 15px;
padding: 6px 9px;
margin-right: 6px;
margin-left: 6px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 50px;
height: 50px;
border-style: solid;
border-color: black;
border-width: 2px;
color: black;
text-decoration: none;
}
#pagination-link:hover {
border-color: #007bff;
color: #007bff;
}
#main_footer{
background: linear-gradient(135deg,#2a99ef 20%,#52d9e5 80%);
width:1287px;
}
{% endblock style %}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="main_nav">
<div class="col-sm-1"></div>
<div class="col-sm-2" id="brand">
<a class="navbar-brand" href="#">Full width</a>
</div>
<div class="col-12 col-md-6" id="main_search">
<div id="custom-search-input">
<form method="GET" action="{% url "posts:search" %}">
<div class="input-group col-md-12">
<input type="text" class="search-query form-control" placeholder="Search" name="q" />
</div>
</form>
</div>
</div>
<div class="col-sm-2" id="main_links">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-1"></div>
</nav>
</header>
</br>
</br>
</br>
{% include "message_display.html" %}
<div class="container">
{% block content %}
{% endblock %}
</div>
<!--Footer-->
<footer class="page-footer font-small blue pt-4">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 class="text-uppercase">Footer Content</h5>
<p>Here you can use rows and columns to organize your footer content.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!--/.Footer-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".post-details").each(function (){
var content = $(this).text()
console.log(content)
var markedContent = marked(content)
console.log(markedContent)
$(this).html(markedContent)
})
})
</script>
</body>
</html>