css - 无法摆脱 Navbar 元素的顶部/底部边距？

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 但没有用，也没有将 padding 设置为 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;
}