Question

所以我有一个我想使用的页脚模板，但是当我在页脚和页眉之间添加内容时，我在页脚和内容之间留下了一个空白。可能是什么问题我没有在元素上使用任何边距。 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>
<!--- 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>
    <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>

和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; } }

这就是我浏览器上显示的内容

无论我在页眉和页脚之间添加什么任何想法，这个空白都会留在那里？

添加了简单的文本来展示空白

Answer 1

我正要回答同样的<div class="jumbotron jumbotron-fluid bg-secondary p-4 mb-0">

Answer 2

没关系，我发现是什么导致了它，我使用的 boostrap 模板在页脚类中添加了属性 mt-5，这是一个 boostrap 属性，它为元素添加了顶部边距，将其更改为 mt-0 为我修复了它。< /p>

页脚和内容之间的 CSS 空白

2 个答案: