navbar-static-top 在 Bootstrap 3 中有什么作用? [英] What does navbar-static-top do in Bootstrap 3?
问题描述
根据Bootstrap 3 的导航栏 static-top 的文档，
静态顶部通过添加 .navbar-static-top 并包含一个 .container 或 .container-fluid 来居中和填充导航栏内容，创建一个随页面滚动的全宽导航栏.
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.
与 .navbar-fixed-* 类不同，您不需要更改正文的任何填充.
Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.
这个方法有什么作用?上面的文档在我看来，即使我向下滚动页面到底部，导航栏也固定在屏幕顶部.但是，这就是 .navbar-fixed-top 的作用，当我在我的应用中使用 .navbar-fixed-top 时，它的工作原理与我提到的完全一样.
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-top does, and when I used .navbar-fixed-top in my app, it works exactly what I've mentioned.
然而，当我在我的应用程序中编写 .navbar-static-top 时，我不知道它与 .navbar-default 有何不同.任何人都可以帮助我澄清差异以及 .navbar-static-top 的作用?
However, when I wrote .navbar-static-top in 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-top do?
推荐答案
navbar-static-top 移除由 navbar-default 创建的左、右和上边框它在页面顶部看起来更好，而您可能只想在页面的其他地方使用 navbar-default...
navbar-static-top removes the left,right and top border created by navbar-default so that it looks better at the top of the page, whereas you might want to use just navbar-default elsewhere on the page...
另一方面，navbar-fixed-top 使用 position:fixed.如果页面上的内容延伸到视口下方(与大多数页面一样)，navbar-fixed-top 将保持在顶部，而 navbar-static-top 将滚动离开.由于 navbar-fixed-top 是固定的，所以它要求 body 有 padding-top，这样它就不会覆盖页面内容...
On the other hand, navbar-fixed-top uses position:fixed. If there is content on the page that extends below the viewport (as there is on most pages) the navbar-fixed-top will remain stuck to the top, whereas the navbar-static-top will scroll away. Since the navbar-fixed-top is fixed, it requires the body to have padding-top so that it doesn't overlay page content...
正如您在每个示例中向下滚动时所看到的，顶部导航栏的响应不同.
As you can see when you scroll down in each example the top navbar responds differently.
这篇关于navbar-static-top 在 Bootstrap 3 中有什么作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
