【发布时间】：2018-10-30 17:05:51
【问题描述】：
我正在尝试创建一个双层导航栏，顶层包含公司信息，如电话、电子邮件、社交链接等。
第二层是主导航栏，应该是粘性透明的。
但现在，它正在将下一个 div（第一个）向下推并创建这个空白区域，而不是悬停在 div 的顶部。我真的找不到它的错。我正在使用 Bootstrap 4。
#top-nav{
position: relative;
z-index: 1000;
}
.top-nav{
background-color: #FFF;
height: 40px;
}
.top-nav a{
color:#696969;
}
.top-nav a:hover{
color:#FF6700;
}
.top-nav p{
margin-left: 50px;
position: relative;
top:5px;
color: #696969;
}
.top-nav .social-links a{
padding-right: 20px !important;
position: relative;
top: 5px;
color: #696969;
}
.top-nav .social-links a:hover{
color: #ff6700;
}
#content{
height:100%;
width:100%;
}
.navbar-brand img{
width: 300px ;
height: auto ;
}
@media screen and (max-width:500px){
.navbar-brand img{
width:250px;
}
#content{
/* top: - */
}
}
@media screen and (min-width: 500px){
.navbar-brand img{
margin-left: 20px;
}
}
.first{
height: 100vh;
background-color: #000;
position: relative;
z-index:0;
/* position:relative;
top:-115px; */
}
.second{
min-height: 100vh;
background-color: #676767;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="top-nav" class="container-fluid text-center">
<div class="container row top-nav justify-content-between ml-auto mr-auto">
<div class="call .col-auto mr-auto">
<p><b>Contact: </b><a href="tel:+11111111">+111111111</a></p>
</div>
<div class="call .col-auto mr-auto">
<p><b>Email: </b><a href="emailto:contact@xyz.com">contact@axyz.com</a></p>
</div>
<div class="col-auto social-links">
<a href="#"><i class = "fab fa-facebook-f"></i></a>
<a href="#"><i class = "fab fa-skype"></i></a>
<a href="#"><i class = "fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-transparent sticky-top">
<a class="navbar-brand" href="index.html">Logo</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 ml-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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="first"></div>
<div class="second"></div>【问题讨论】：
-
第二个导航栏在那里.. 但你看不到白色链接，因为它是
navbar-dark。
标签： html css twitter-bootstrap bootstrap-4