navbar-static-top在Bootstrap 3中做什么？ [英] What does navbar-static-top do in Bootstrap 3?

问题描述

根据 Bootstrap 3的navbar static-top 文档，

静态顶部
创建一个全宽导航栏，通过添加.navbar-static-top滚动页面，并包含一个.container或.container-

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固定在屏幕的顶部，即使当我向下滚动页面到底部。但是，这是 .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 将保持顶部， c $ c> 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屋！