html - Bootstrap nav-fixed-top 在页面缩小时覆盖文本

Question

我知道关于这个问题有很多问题，但我还没有得到满意的答复。

我有一个页面，其中包含使用 nav-fixed-top Bootstrap 类构建的菜单。问题在于此菜单与以下内容重叠。

我知道如何解决为菜单后的第一个元素定义 60px 的 margin-top 的问题。问题是当页面缩小到移动设备的大小时，菜单水平展开并再次与以下内容重叠。

我的菜单是这样创建的:

    <nav class="navbar navbar-inverse navbar-fixed-top navbar-static-top">
     <div class="container">
       <div class="navbar-header">
         <a class=navbar-brand href="#">
           My Brand
         </a>
       </div>
       <ul class="nav navbar-nav">
        <li class="active"><a href="#">ABOUT</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#contact">CONTACT</a></li> 
      </ul>  
     </div>
   </nav>

可以在这里找到正在发生的事情的例子:http://codepen.io/miguelbgouveia/pen/QEvyrR

这个问题的解决方案是什么？

Answer 1

进行媒体查询以设置每个设备的 margin-top

Documentation

也不要使用您的标题来设置 margin-top(当然不是 id)。但是在你的容器中创建一个额外的类，比如“内容”，并为此设置一个边距。或者只使用 body 元素。

/*standard value for mobile devices, bootstrap is mobile first: */
.content {
  margin-top:200px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
.content {
  margin-top: 100px;
}
 }


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
 .content {
  margin-top: 80px;
}
}


/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
   .content {
  margin-top: 60px;
}
 }