Question

我获得并编辑的导航栏如下所示，还包括我试图覆盖引导代码的css代码。我在下面列出了当前和预期的输出图像。

<div class="row fixed-top">
<div class="col-md-1"></div>
<div class="col-md-10 padding">
    <nav class="navbar navbar-expand-lg  navbar-light bg-light">
        <span class="navbar-brand" >MySite</span>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" 
                aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

<div class="collapse navbar-collapse justify-content-end" id="navbarMain">
            <div class="navbar-nav float-lg-right">
                <a class="nav-item nav-link" href="#">Home</a>
                <a class="nav-item nav-link" ref="#services">Services</a>
                <a class="nav-item nav-link" href="#ourwork">Our Work</a>
                <a class="nav-item nav-link" href="#about">About Us</a>
                <a class="nav-item nav-link"href="#contact">ContactUs</a>
            </div>                   
        </div>
    </nav>
    </div>
<div class="col-md-1"></div>
</div>

我试过的css代码

 nav a:hover{
 background-color: green;
 text-decoration: none;
 margin: 0 0 0 0 !important;
 }

nav a:focus{
color: black;
}

.collapse{
margin: 0;
}

当前输出

预期产出

Answer 1

请在https://www.sitepoint.com/set-css-margins-padding-cool-layout-tricks/

阅读有关边距，填充和框模型的信息

如果我理解正确，您希望绿色背景颜色到达页面顶部，中间没有任何阴影。

要回答你的问题，你的CSS会影响链接，而不影响他们的父母元素（控制空间），以及它不起作用的原因。

您需要：
1）直接取消.navbar的填充顶部属性

.navbar {
    padding-top: 0;
}

2）通过向.navbar添加负边距 - 顶部来取消#navbarMain的padding-top属性

#navbarMain {
    margin-top: -.5rem;
}

-.5rem可能不是这种情况，但据我所知，这是Bootstrap 4的默认设置。

Answer 2

要获得预期的输出，您只需要向nav a:hover添加2条规则，如下所示：

margin-top: -8px;
padding-top: 16px;

请注意，我还删除了您的<div class="col-md-1"></div>个元素，并将其替换为一个offset-md-1类，因为它更加清晰。

以下是完整的工作片段：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
nav a:hover{
    background-color: green;
    text-decoration: none;
    margin-top: -8px;
    padding-top: 16px;
}

nav a:focus{
    color: black;
}

.collapse{
    margin: 0;
}
</style>

<div class="row fixed-top">
    <div class="col-md-10 offset-md-1 padding">
        <nav class="navbar navbar-expand-lg  navbar-light bg-light">
            <span class="navbar-brand" >MySite</span>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" 
                    aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarMain">
                <div class="navbar-nav float-lg-right">
                    <a class="nav-item nav-link" href="#">Home</a>
                    <a class="nav-item nav-link" ref="#services">Services</a>
                    <a class="nav-item nav-link" href="#ourwork">Our Work</a>
                    <a class="nav-item nav-link" href="#about">About Us</a>
                    <a class="nav-item nav-link"href="#contact">ContactUs</a>
                </div>                   
            </div>
        </nav>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

如何在悬停中从引导导航栏中删除边距？

2 个答案: