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

【问题标题】：How to remove the margin from bootstrap navigation bar in hover?如何在悬停时从引导导航栏中删除边距？
【发布时间】：2018-01-25 05:08:54
【问题描述】：

我得到并编辑的导航栏如下，还包括我试图覆盖引导代码的 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;
}

当前输出

预期输出

【问题讨论】：

标签： jquery html css twitter-bootstrap bootstrap-4

【解决方案1】：

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

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

请注意，我还删除了您的两个 <div class="col-md-1"></div> 元素并用一个 offset-md-1 类替换它们，因为这样更干净一些。

这是完整的工作 sn-p：

<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】：

请在https://www.sitepoint.com/set-css-margins-padding-cool-layout-tricks/阅读有关边距、填充和框模型的信息

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

要回答您的问题，您的 CSS 会影响链接而不是其父元素（控制空间），这就是它不起作用的原因。

您需要：
1）直接取消.navbar的padding-top属性

.navbar {
    padding-top: 0;
}

2) 取消.navbar 的padding-top 属性，方法是给#navbarMain 添加负边距顶部

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

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

【讨论】：