本文介绍了navbar-static-top 在 Bootstrap 3 中有什么作用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

根据Bootstrap 3 的导航栏 static-top 的文档,

静态顶部通过添加 .navbar-static-top 并包含一个 .container 或 .container-fluid 来居中和填充导航栏内容,创建一个随页面滚动的全宽导航栏.

与 .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 中有什么作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-22 12:07