[英]CSS white space between footer and content
So i have a footer template i want to use but when I add the content between the footer and the header I am left with a white space between the footer and the content.所以我有一个我想使用的页脚模板,但是当我在页脚和页眉之间添加内容时,我在页脚和内容之间留下了一个空白。 what could be the problem I haven't used any margins on the elements.
可能是什么问题我没有在元素上使用任何边距。 HTML Head
HTML 头
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap 4 Navbar</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
</head>
Header标题
<header>
<!--- Navbar --->
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand text-white" href="#"><i class="fa fa-graduation-cap fa-lg mr-2"></i>BLOG</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nvbCollapse" aria-controls="nvbCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nvbCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-home fa-fw mr-1"></i>Anasayfa</a>
</li>
<li class="nav-item active pl-1">
<a class="nav-link" href="#"><i class="fa fa-th-list fa-fw mr-1"></i>Blog</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-info-circle fa-fw mr-1"></i>Hakkımızda</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-phone fa-fw fa-rotate-180 mr-1"></i>İletişim</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-user-plus fa-fw mr-1"></i>Kayıt Ol</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-sign-in fa-fw mr-1"></i>Oturum Aç</a>
</li>
</ul>
</div>
</div>
</nav>
<!--# Navbar #-->
</header>
Footer页脚
<footer>
<div class="jumbotron jumbotron-fluid bg-secondary p-4 mt-5 mb-0">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 cizgi">
<div class="card bg-secondary border-0">
<div class="card-body text-light text-center">
<h5 class="card-title text-white display-4" style="font-size:30px">Telif Hakkı</h5>
<p class="d-inline lead">Tüm Hakları Saklıdır © 2018<br>
<a href="#" class="text-light d-block lead">Blog</a>
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 cizgi">
<div class="card bg-secondary border-0">
<div class="card-body text-center">
<h5 class="card-title text-white display-4" style="font-size:30px">İletişim</h5>
<a class="text-light d-block lead" style="margin-left: -20px" href="#"><i class="fa fa-phone mr-2"></i>+90 (000) 000 0 000</a>
<a class="text-light d-block lead" href="#"><i class="fa fa-envelope mr-2"></i>admin@localhost.com</a>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
<div class="card bg-secondary border-0">
<div class="card-body text-center">
<h5 class="card-title text-white display-4" style="font-size:30px">Sosyal Medya</h5>
<a class="text-light" href="#"><i class="fa fa-facebook-square fa-fw fa-2x"></i></a>
<a class="text-light" href="#"><i class="fa fa-twitter-square fa-fw fa-2x"></i></a>
<a class="text-light" href="#"><i class="fa fa-instagram fa-fw fa-2x"></i></a>
<a class="text-light" href="#"><i class="fa fa-linkedin fa-fw fa-2x"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
and the css和 CSS
.navbar { background-color: #484848; }
.navbar .navbar-nav .nav-link { color: #fff; }
.navbar .navbar-nav .nav-link:hover { color: #fbc531; }
.navbar .navbar-nav .active > .nav-link { color: #fbc531; }
footer a.text-light:hover { color: #fed136!important; text-decoration: none; }
footer .cizgi { border-right: 1px solid #535e67; }
@media (max-width: 992px) { footer .cizgi { border-right: none; } }
and that's what shows on my browser这就是我的浏览器上显示的内容
This white space stays there no matter what I add between the header and footer any ideas ?无论我在页眉和页脚之间添加什么任何想法,这个空白都会留在那里?
added simple text to demonstrate the white space添加了简单的文本来演示空白
我正要回答同样的<div class="jumbotron jumbotron-fluid bg-secondary p-4 mb-0">
没关系,我发现是什么导致了它,我使用的 boostrap 模板将属性 mt-5 添加到页脚类,这是一个 boostrap 属性,它为元素添加顶部边距,将其更改为 mt-0 为我修复了它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.