CSS navbar-static-top 在 Bootstrap 3 中有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23020763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does navbar-static-top do in Bootstrap 3?
提问by Blaszard
According to the documentation of the Bootstrap 3's navbar static-top,
根据Bootstrap 3 的导航栏 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-static-top 并包含一个 .container 或 .container-fluid 来居中和填充导航栏内容，创建一个随页面滚动的全宽导航栏。
与 .navbar-fixed-* 类不同，您不需要更改正文的任何填充。
what does this method do? The above documentation looks like to me that the navbar is fixed at the top of the screen even when I scroll down the page to the bottom. However, it's what .navbar-fixed-topdoes, and when I used .navbar-fixed-topin my app, it works exactly what I've mentioned.
这个方法有什么作用？上面的文档在我看来，即使我向下滚动页面到底部，导航栏也固定在屏幕顶部。然而，这就是它的.navbar-fixed-top作用，当我.navbar-fixed-top在我的应用程序中使用时，它完全按照我提到的方式工作。
However, when I wrote .navbar-static-topin my app, I don't know what makes it different from just the .navbar-default. Anyone can help me in clarifying the difference and what the .navbar-static-topdo?
但是，当我.navbar-static-top在我的应用程序中编写时，我不知道是什么让它与.navbar-default. 任何人都可以帮助我澄清差异和.navbar-static-top做什么？
回答by Zim
navbar-static-topremoves the left,right and top border created by navbar-defaultso that it looks better at the top of the page, whereas you might want to use just navbar-defaultelsewhere on the page...
navbar-static-top删除由创建的左、右和上边框navbar-default，使其在页面顶部看起来更好，而您可能只想navbar-default在页面上的其他地方使用 ...
navbar-static-top: http://bootply.com/129342
导航栏静态顶部：http: //bootply.com/129342
On the other hand, navbar-fixed-topuses position:fixed. If there is content on the page that extends below the viewport (as there is on most pages) the navbar-fixed-topwill remain stuck to the top, whereas the navbar-static-topwill scroll away. Since the navbar-fixed-topis fixed, it requires the body to have padding-top so that it doesn't overlay page content...
另一方面，navbar-fixed-top使用position:fixed. 如果页面上的内容延伸到视口下方（就像在大多数页面上一样），navbar-fixed-top它将保持在顶部，而navbar-static-top将滚动离开。由于navbar-fixed-top是固定的，它要求正文具有 padding-top 以便它不会覆盖页面内容......
navbar-fixed-top: http://bootply.com/129345
导航栏固定顶部：http: //bootply.com/129345
As you can see when you scroll down in each example the top navbar responds differently.
正如您在每个示例中向下滚动时所看到的，顶部导航栏的响应不同。
