bootstrap barre de navigation de menu chevauche le texte

im en utilisant la dernière version de bootstrap et quand j'ai redimensionner l'écran du navigateur la barre de navigation, quand elle tombe avec le petit bouton à bascule chevauche le texte sur la page, au lieu de pousser le contenu de la page vers le bas. J'ai étudié le problème à plusieurs reprises. J'ai essayé de mettre padding-bottom sur la barre de navigation et padding-top sur le corps. J'ai essayé de nombreuses autres choses, suggéré mais rien ne fonctionne. Reconnaissant de toute aide.

Voici le code html:

      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-     collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="navbar-brand navbar-brand-left" href="#"><a href="index.html"><img src="somepicture"></a></div>
    </div>
    <div class="collapse navbar-collapse" id="navbar-brand-centered"">
      <ul class="nav navbar-nav">
         <li><a href="someurl">Home</a></li>
         <li><a href="someurl" id="active2">What's On</a></li>
         <li><a href="someurl">About Us</a></li>
         <li><a href="someurl">Parties</a></li>
        <li><a href="someurl">Gallery</a></li>
        <li><a href="someurl">Menu</a></li>
      </ul>
     <ul class="nav navbar-nav navbar-right">
    <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Share<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="someurl">Facebook</a></li>
                <li><a href="someurl">Twitter</a></li>
              </ul>
        <li><a href="someurl">Contact Us</a></li>

      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

le css que j'ai utilisé était seulement d'appliquer de la couleur/police/taille de la police, etc, rien de ce qui aurait contribué à ce problème. Sa base et simple brochure, site web et je suis sûr que le problème est probablement juste en face de mes yeux, mais je ne suis pas assez expérimenté pour avis im seulement l'apprentissage, mais encore n'apprécie quelqu'un qui pourrait l'aider.

La barre de navigation fonctionne parfaitement bien et la manière dont il est supposé dans des conditions normales de la taille du bureau, mais le problème est que lorsque je redimensionner le navigateur d'un téléphone mobile de la taille.

C'est l'url d'une image du problème afin de le rendre plus facile à comprendre:
http://s1368.photobucket.com/user/oliviah452/media/Screenshot2_zpsc9ffafb1.png.html

La barre de navigation fixe les exigences d'un rembourrage ou de la marge pour le corps, tel que décrit dans la documentation. Puisque c'est probablement en pixels, elle ne change pas quand les choses envelopper. voir aussi: stackoverflow.com/questions/11124777/...
Ya j'ai essayé cela avant, et j'ai juste essayé de nouveau, mais tout cela ne fait que pousser le contenu de la page vers le bas en général pas lorsque j'appuie sur le bouton basculer vers le menu déroulant lorsque le navigateur est redimensionnée si cela a du sens? le texte de la barre de navigation toujours chevauche le contenu de la page
La JS seul fonctionne très bien... bootply.com/Ey7iLyIsTo j'ai doublé le menu en haut à quelques reprises à la ligne de force de rupture (bootply ne vous permet pas de réduire la fenêtre d'affichage beaucoup)

OriginalL'auteur DecafOyster208 | 2014-11-07