固定导航栏与小型设备中的内容重叠

Question

我已经复制了代码所以我没有太多的想法回合它。设计似乎在桌面浏览器中工作正常，但只要我使用移动配置，页脚似乎与内容重叠..

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

这是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; }
    }

这是页脚类..

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

Answer 1

也许把整个导航包裹起来

div class ='container'