Question

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

我有一个带有nav-fixed-top引导类的菜单构建的页面。问题是此菜单与以下内容重叠。

我有些如何解决在菜单后第一个元素定义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）。但是在容器中添加一个额外的类，如'content'，并设置一个余量。或者只使用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;
}
 }

Answer 2

您还可以使用此代码获得更好的标准。 http://codepen.io/nehemc/pen/dXWGQd

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="#">Brand</a> </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <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>
  </div>
</nav>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h4 id="first-title">Title 1</h4>
      <h4>Title 2</h4>
      <h4>Title 3</h4>
    </div>
  </div>
</div>

当页面减少时，Bootstrap nav-fixed-top会覆盖文本

2 个答案: