html - 静态 Bootstrap 导航栏在其上方创建空白

Question

我的 Bootstrap 导航栏有问题。我将其从固定导航栏更改为静态导航栏，并在我更改它时创建了一个空白区域。有关于如何修复它的想法吗？这是我的 navbar.css

    .navbar-default {
    background-color: transparent;
    border-color: transparent;
    border-radius: 0px;
    padding: 15px 40px 10px 40px;
}

.navbar-brand img {
    height: 65px;
    width: 65px;
    margin-top: -20px;
    opacity: 0.5;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    transition: opacity .5s;
}

.navbar-brand img:hover {
    opacity: 1;
}

.navbar-default .navbar-nav>li>a {
    font-family: Raleway;
    font-size: 20px;
    color: #757575;
}

.navbar-default .navbar-nav>li>a {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a {
    background-color: transparent !IMPORTANT;
}

.navbar-default li.active a {
    border-bottom: 4px solid #202020;
    color: #202020 !IMPORTANT;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #202020 !IMPORTANT;
}

连同 html， http://pastebin.com/21pW6ixt

Answer 1

上面的答案可能是早期版本的旧答案，但是对于 Bootstrap 4，在尝试了上面的一些之后，我意识到我只需要在类中包含 fixed-top 来删除导航栏上方的空白.

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary ">

没有固定顶部 - 空白，即使您手动更改填充，它也会保留

固定顶部的导航栏如预期的那样在顶部....

它在文档中https://getbootstrap.com/docs/4.0/components/navbar/#placement和笔记“固定导航栏使用 position: fixed，这意味着它们是从 DOM 的正常流中提取出来的，可能需要自定义 CSS(例如，padding-top on the )”