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变量并将链接文本更改为白色来弄清楚如何更改导航栏的背景颜色：

$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以保持原始高度：

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>

无法摆脱Navbar项目的上/下边距？

2 个答案: