静态Bootstrap Navbar在其上方创建空白区域

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

正如我所看到的，你有浮动权限应用于类navbar-right。删除右浮动，默认情况下所有导航项将再次向左浮动。

编辑你的css以删除浮动权利声明（我已经注释掉它以告诉你要删除的内容）：

＆＃13;

＆＃13;

.navbar-right {
    /* float: right !important; */
    margin-right: -15px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

我猜您必须通过将.navbar-default设置为零来更改padding-top元素上的填充（它将在导航栏的元素上方）：

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

并从margin-bottom元素中移除.navbar（它将删除这些元素下的空白区域）：

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 0;
    border: 1px solid transparent;
}

（基于我可以从你的两个片段中重现的内容）
之前和之后：

Answer 3

以上答案可能是较早版本的旧答案，但对于Bootstrap 4，在尝试了上述一些方法后，我意识到我只需要在类中包含固定顶部的内容即可删除导航栏上方的空白

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

在没有固定顶部空白的情况下，即使您手动更改填充，空白也会保留

按预期将顶部导航栏固定在顶部...。

它在文档https://getbootstrap.com/docs/4.0/components/navbar/#placement中 和笔记 “固定的导航栏使用位置：固定，表示它们是从DOM的正常流程中拉出的，并且可能需要自定义CSS（例如，的padding-top）”