Bootstrap nav-fixed-top überschreibt den Text, wenn die Seite verkleinert wird

Question

Ich weiß, dass viele Fragen zu diesem Thema sind, aber ich kann noch keine zufriedenstellende Antwort bekommen.

Ich habe eine Seite mit einem Menü, das mit der Bootstrap-Klasse nav-fixed-top erstellt wurde. Das Problem ist, dass dieses Menü den folgenden Inhalt überlappt.

Ich einige, wie das Problem zu lösen, einen Rand oben von 60px für das erste Element nach dem Menü zu definieren. Das Problem ist, wenn die Seite auf die Größe eines mobilen Geräts reduziert wird, wird das Menü horizontal erweitert und überlappt den folgenden Inhalt erneut.

Mein Menü wird wie folgt erstellt:

<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> 

Und Beispiel dafür, was geschieht hier gegründet werden: http://codepen.io/miguelbgouveia/pen/QEvyrR

Was die Lösung für dieses Problem ist?

Answer 1

Machen Medien-Anfragen für jedes Gerät

Documentation

auch nicht benutzen, um Ihre Titel, um die margin-top, um die margin-top (und schon gar nicht eine id) einzustellen. Aber machen Sie eine Extra-Klasse in Ihrem Container wie 'Inhalt' und setzen Sie einen Spielraum dafür. Oder benutze einfach das Körperelement.

/*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

Sie können diesen Code auch für bessere Standards verwenden. 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>