navbar-3中的navbar-static-top做了什么?

时间:2014-04-11 19:09:42

标签: css twitter-bootstrap twitter-bootstrap-3

根据the Bootstrap 3's navbar static-top的文件,

  

静态顶部   通过添加.navbar-static-top创建一个随页面滚动的全角导航栏,并包含.container或.container-fluid以居中并填充导航栏内容。

     

与.navbar-fixed- *类不同,您无需更改正文中的任何填充。

这种方法有什么作用?上面的文档对我来说,即使我向下滚动页面到底部,导航栏也固定在屏幕顶部。但是,这是.navbar-fixed-top的作用,当我在我的应用中使用.navbar-fixed-top时,它完全符合我的提及。

但是,当我在我的应用中编写.navbar-static-top时,我不知道是什么让它与.navbar-default不同。任何人都可以帮我澄清差异以及.navbar-static-top做什么?

1 个答案:

答案 0 :(得分:51)

navbar-static-top删除navbar-default创建的左,右和上边框,以便在页面顶部看起来更好,而您可能只想在其他地方使用navbar-default页...

navbar-static-top:http://bootply.com/129342

另一方面,navbar-fixed-top使用position:fixed。如果页面上的内容延伸到视口下方(大多数页面都有),navbar-fixed-top将保持在顶部,而navbar-static-top将滚动。由于navbar-fixed-top是固定的,因此它需要主体具有填充顶部,以便它不会覆盖页面内容......

navbar-fixed-top:http://bootply.com/129345

正如您在每个示例中向下滚动时所看到的那样,顶部导航栏的响应方式不同。