关于 Bootstrap 的导航条的小问题

这两天整理一下 WebBroker 写的 CMS 的代码，清理一下页面框架。

页面框架使用了 Bootstrap V3 （V4 出来了，但网上的例子代码，在 V4 底下呈现出来会有问题，在 V3 底下没问题）。

页面抬头的主菜单，在 Bootstrap 里面叫做导航条。这个导航条可以随着页面向上滚动而一起滚动，也可以固定置顶，页面滚动时它始终显示在页面顶部。

导航条固定置顶，是给导航条的 class 里面添加：class .navbar-fixed-top, 比如在我自己的例子代码里，就是：

然后，在增加了固定置顶的属性后，页面正文的顶部，就会被这个导航条遮住。要让正文顶部下移，给页面的 添加 style 的属性：

直接在页面里面写：：, 就要每个页面都要写。因此最好写到外部 css 文件里面。

在外部 CSS 文件里面写：

body{padding-top: 50px} 在 FireFox 浏览器底下效果出来了，在 Chrome 底下没有效果。网上查了一下,查到：http://www.miaojingyun.com/post/286.html，应该写成：

body {padding-top: 50px;
      overflow:hidden;
}

加上 overflow:hidden; Chrome 底下效果出来了。FireFox 效果仍然在。多谢这位博客主人：苗景云

-----------------------------------

又及：

这里为 Body 增加了一个 padding 以后，整个页面长度超出浏览器高度时，浏览器不会出滚动条了。

因此，要换个解决办法：

在导航条的底下，增加一个 div，给它的 css 里面，设置一个最小高度，也就是出来一个空白的高度：

    

.Splitter{
 min-height: 52px;
 
}

这个办法测试结果OK。

页面内容在这个 div 底下。这样一来，整个页面内容都向下偏倚了 52 个像素，内容的顶部就不会被导航条遮蔽了。