我的问题是页脚。当项目列表为空时，页脚几乎到达导航栏本身。我试图以某种方式绕过它，但我不是前端开发人员，但失败了。
我使用具有自定义类.page-footer的Bootstrap 4。
css代码：
.page-footer {
padding: 2.5rem 0;
color: #999;
text-align: center;
border-top: .05rem solid #e5e5e5;
}
html代码：
{% block footer %}
<footer class="page-footer">
<div class="container ">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="{% static 'images/small_image.png' %}">
<small class="d-block mb-3 text-muted">© 2018</small>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
</div>
</div>
</footer>
{% endblock footer %}
整个html页面：
<!DOCTYPE html>
<html lang="en">
{% block header %}
<head>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap/css/bootstrap.css' %}" rel="stylesheet">
</head>
{% endblock header %}
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Link</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
{% if user.is_authenticated %}
<div class="navbar-collapse collapse justify-content-stretch" id="navbar5">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"> All links <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">All links</a>
</li>
</ul>
<form action="#" method="get" class="ml-3 my-auto d-inline w-20">
<div class="input-group input-group-sm">
<input type="text" class="form-control border-right-0">
<div class="input-group-append">
<button class="btn btn-outline-primary border-left-0" type="submit">Search</button>
</div>
</div>
</form>
<div class="my-auto d-inline ml-3">
<ul class="navbar-nav">
<li><a role="button" href="#" type="button" class="btn btn-outline-primary btn-sm mr-3">Link</a></li>
<li><a role="button" href="#" type="button" class="btn btn-outline-primary btn-sm">Link</a></li>
</ul>
</div>
<div class="nav navbar-nav ml-auto dropdown">
<button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
User
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
<a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
<a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
<a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
</div>
</div>
</div>
{% endif %}
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
{% block content %}{% endblock content %}
{% block sidebar %}
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Title</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled mb-0">
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
<!--<div class="col-lg-6">-->
<!--<ul class="list-unstyled mb-0">-->
<!--<li>-->
<!--<a href="#">JavaScript</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#">CSS</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#">Tutorials</a>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
</div>
</div>
{% endblock sidebar %}
</div>
<!-- /.row -->
</div>
<!-- /.container -->
{% block footer %}
<footer class="page-footer">
<div class="container ">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="{% static 'images/small_image.png' %}">
<small class="d-block mb-3 text-muted">© 2018</small>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
</div>
</div>
</footer>
{% endblock footer %}
</body>
</html>
答案 0 :(得分：1)
当你说：
页脚几乎到达导航栏
...根据评论，这听起来像是您的问题是页脚并不总是至少在屏幕的垂直底部并且过于靠近导航栏。
您的问题不一定在页脚本身中，您可以根据自己的期望结果以几种方式解决此问题。
一种解决方案是添加
position:absolute;
width: 100%;
bottom:0;
...到页脚，就像我在Restarting windows service during WIX upgrade中所做的那样。
现有答案This codepen中还有其他解决方案。