css – 引导栏 – 静态顶端在Bootstrap 3中做了什么?

前端之家收集整理的这篇文章主要介绍了css – 引导栏 – 静态顶端在Bootstrap 3中做了什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
根据 the Bootstrap 3’s navbar static-top文件

Static top
Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.

Unlike the .navbar-fixed-* classes,you do not need to change any padding on the body.

这个方法是做什么的?上述文档对我来说,即使我向下滚动页面底部,导航栏固定在屏幕的顶部。但是,这是.navbar-fixed-top,当我在我的应用程序中使用.navbar-fixed-top时,它正好符合我所提到的内容

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

解决方法

navbar-static-top删除由navbar-default创建的左,右和上边框,以便在页面顶部看起来更好,而您可能希望在页面上的其他位置使用navbar-default …

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

另一方面,navbar-fixed-top使用位置:固定。如果页面上的内容在视口下方延伸(因为大多数页面都有),导航栏固定顶部将保持卡在顶部,而navbar-static-top将滚动。由于导航栏固定顶部是固定的,因此它需要机身具有顶部顶点,使其不覆盖页面内容

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

当您在每个示例中向下滚动时,您可以看到顶部导航栏的响应不同。

猜你在找的CSS相关文章