Bootstrap 4,CSS问题-我的容器卡在导航栏上

因此,基本上我有一个固定的导航栏。我有一个容器,里面有内容,但是无论我如何对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>

很抱歉,如果我没有正确格式化代码,这只是我第二次询问问题。 非常感谢您关注我的问题:)!

评论