【问题标题】:What does navbar-static-top do in Bootstrap 3?navbar-static-top 在 Bootstrap 3 中有什么作用?
【发布时间】:2014-05-26 02:11:39
【问题描述】:

根据the Bootstrap 3's navbar static-top的文档,

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

与 .navbar-fixed-* 类不同,您不需要更改主体上的任何填充。

这个方法有什么作用?上面的文档在我看来导航栏固定在屏幕顶部,即使我将页面向下滚动到底部也是如此。但是,.navbar-fixed-top 就是这样做的,当我在我的应用程序中使用 .navbar-fixed-top 时,它的工作原理与我提到的完全一样。

但是,当我在我的应用程序中写 .navbar-static-top 时,我不知道它与 .navbar-default 有何不同。任何人都可以帮助我澄清区别以及.navbar-static-top 做什么?

【问题讨论】:

  • 它基本上清理了边界,以便它们在视口顶部以 100% 的视口宽度很好地发挥作用。看看with vs without

标签: css twitter-bootstrap twitter-bootstrap-3


【解决方案1】:

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

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

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

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

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

【讨论】:

  • 谢谢。那么如果我把.navbar-default全宽放在屏幕顶部,那么.navbar-default.navbar-static-top没什么区别,对吧?我知道.navbar-static-top.navbar-fixed-top 之间有什么区别,但不确定.navbar-static-top.navbar-default 是否设置为顶部。
  • 置顶没有区别。不同之处在于导航栏的边框。同样,navbar-static-top 删除了左、右和上边框。
  • 我在 bootply (navbar-static-top) 中查看了您的第一个示例,从中删除了类 navbar-static-top,重新运行 bootply,没有任何视觉变化.. 什么继续?!
猜你喜欢
  • 2014-04-09
  • 1970-01-01
  • 1970-01-01
  • 2015-02-13
  • 1970-01-01
  • 1970-01-01
  • 2015-06-14
  • 2023-03-27
  • 1970-01-01
相关资源
最近更新 更多