无法摆脱导航栏项目的顶部/底部边距？

Question

我是 Bootstrap 4 和 SASS 的新手。我一直在努力学习如何做出改变，但已经完成了一些。但是，我似乎无法弄清楚其中之一是导航栏项目顶部和底部的边距或填充。

这就是我所做的。在一个新的 MVC 项目中，我安装了 Bootstrap 4 和 Bootstrap.sass。然后我创建了一个新的 _custom-variables 并将 _variables 内容复制到其中，以便我可以进行一些更改。然后我创建了一个 _my-theme.scss 文件，并像这样将它们全部导入到我的 site.scss 中。

@import "scss/_custom-variables.scss";
@import "scss/_bootstrap.scss";
@import "scss/_my-theme.scss";

我终于能够通过为我的颜色创建一个变量并将其应用于 _custom-variables 并将链接文本更改为白色来弄清楚如何更改导航栏的背景颜色：

$main-color: #0078D2;

// Navbar links
$navbar-default-link-color: #fff !default;
$navbar-default-link-hover-color: #fff !default;
$navbar-default-link-hover-bg: darken($main-color, 6.5%) !default;

我还必须在 _my-theme.css 中设置以下内容才能将文本颜色实际更改为白色。我看过一些视频，我知道这与特异性有关，但我仍然没有真正理解它。根据我观看的视频，我所做的是检查链接并找到我刚刚复制到 _my-theme.scss 中的属性。

这是我必须添加到 _my-theme.scss 以使文本变白的内容。

.navbar-dark 
.navbar-nav 
.nav-link {
    color: #fff;
    margin-top: 0px;
    margin-bottom: 0px;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus{
    color: #fff;
}

但是，我想删除的每个链接顶部仍有一些填充或边距。您可以看到我尝试设置 margin-top: 0px 和 margin-bottom: 0px 但这不起作用，也没有将填充设置为 0px。

我还尝试在 Chrome 的开发工具中查找设置，但找不到设置此设置的内容。

这是我的导航栏布局：

<header>
<nav class="navbar navbar-default navbar-expand-md navbar-dark fixed-top rounded-0">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>
</header>

如何去掉这个间距，让深蓝色占据导航栏的整个高度？

Answer 1

默认情况下，navbar 类包含内部填充。如果你想删除顶部和底部的填充，只需添加这个 CSS：

.navbar {
    padding-top: 0;
    padding-bottom: 0;
}

Answer 2

空间是填充，而不是边距。使用 py-0 实用程序类从导航栏中删除填充。然后在nav-link后面加padding，保持原来的高度：

https://www.codeply.com/go/roU5MIf724

.navbar-dark 
.navbar-nav 
.nav-link {
    color: #fff;
    padding: 10px 0;
}

<nav class="navbar navbar-default navbar-expand-md navbar-dark fixed-top rounded-0 py-0">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>