css - Bootstrap 3 中的 navbar-static-top 有什么作用？

Question

根据 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 的作用？

Answer 1

navbar-static-top 删除由 navbar-default 创建的左、右和上边框，这样它在页面顶部看起来更好，而你可能只想在页面的其他地方使用 navbar-default...

导航栏静态顶部:http://bootply.com/129342

另一方面，navbar-fixed-top 使用position:fixed。如果页面上有内容延伸到视口(viewport)下方(大多数页面都有)，navbar-fixed-top 将保持在顶部，而 navbar-static-top 将滚动离开。由于 navbar-fixed-top 是固定的，它要求正文具有 padding-top 以便它不会覆盖页面内容...

导航栏固定顶部:http://bootply.com/129345

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