如何防止固定导航栏遮挡响应式引导设计中的页面内容？

解决导航栏对页面开始的内容遮挡

使用固定的 Twitter Bootstrap 导航栏时，经常会遇到导航栏遮挡顶部页面内容的问题。本文提出了解决此问题的解决方案。

<div class="navbar navbar-fixed-top">
<pre class="brush:php;toolbar:false"><div><p></p></div><br>

虽然向页面添加简单的填充似乎是一个解决方案：

body {<pre class="brush:php;toolbar:false">padding-top: 60px;

}

这种方法对于响应式 Bootstrap 设计来说是有缺陷的。调整视口大小时，页面顶部和导航栏之间会出现间隙。

正确的解决方案是使用媒体查询根据屏幕宽度调整页面内边距：

 body {<pre class="brush:php;toolbar:false">padding-top: 60px;

}
@media (最大宽度: 979px) {

body {
    padding-top: 0px;
}

}

这个修改可确保页面内容不受导航栏阻碍，同时在不同屏幕尺寸上保持一致的设计。