Die feste Navbar überlappt Inhalt in kleinen Geräten

Question

Ich habe den Code kopiert, so dass ich nicht viel Ahnung haben. Das Design scheint in Desktop-Browsern gut zu funktionieren, aber sobald ich mobile Konfigurationen verwenden scheint der Footer den Inhalt zu überlappen.

. ist

<div class="navbar navbar-inverse navbar-fixed-bottom container"> 
    <div class="row"> 

    <div> 
     <p class="navbar-text" align="center">© 
     <script type="text/javascript"> 
       document.write(new Date().getFullYear()); 
      </script> 
      mywebsite.com 
     </p> 
    </div> 



    </div> 
</div> 

Hier ist die CSS

body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 

body { padding-top: 15px;} 
    @media screen and (max-width: 768px) { 
     body { padding-top: 0px; } 
     body { padding-bottom: 60px; } 
    } 

Hier ist die Fußzeile Klasse ..

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 40px; 
    background-color: #f5f5f5; 
    position: relative; 
} 

Answer 1

Vielleicht wrap das ganze nav in einem

div class = 'container'