因此,基本上我有一个固定的导航栏。我有一个容器,里面有内容,但是无论我如何对css应用边距以使其移动,它都不会按预期移动。
老实说,这是完全相同的问题:
Why does this CSS margin-top style not work?
我尝试了各种方法,但我认为这与利润下降有关,但我不知道如何解决问题。这是我的代码
enter code here
.myNav {background-color:#141414; }
.myNav .navbar-brand{color:white;}
.myNav .nav-link{color:white;}
.myNav .nav-link:hover{color:red;}
html {
position: relative;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
background-color: white;
}
body > .container {
padding: 60px 15px 0;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: black;
color:white;
}
.carousel-item{
height: 300px;
}
.carousel-item img{
height: 300px;
}
.myButton{background-color:#557A95; color:white; margin-bottom:20px; margin-top:0px; padding:20px; font-size:15px; }
.contactBG{color:red;
background-color:grey;
margin-top:20px;
}
继承人的HTML
<div >
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md fixed-top myNav " >
磁带Drilla
<li class="nav-item active">
<a class="nav-link" href="#"><span class="fas fa-music"> </span> KITS <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><span class="fas fa-globe"> </span> TUTORIALS <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><span class="fas fa-question"> </span> FAQ'S <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="Contact"><span class="fas fa-mail-bulk"> </span> CONTACT <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-user"> </span> USER
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><span class="fas fa-search"> </span> SEARCH <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><span class="fas fa-shopping-cart"> </span> CHECKOUT <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
很抱歉,如果我没有正确格式化代码,这只是我第二次询问问题。 非常感谢您关注我的问题:)!