【问题标题】:Bootstrap 3- make vetical navbar not pushing site contentBootstrap 3-使垂直导航栏不推送网站内容
【发布时间】:2017-08-21 18:03:18
【问题描述】:

我想创建不与网站内容交互(不移动内容)的侧导航栏。来自站点之一的示例 bootstrap 3 导航栏:

https://bootsnipp.com/snippets/featured/side-menu-on-hover

我知道在 Internet 或论坛上必须有相应的帖子,但我找不到。我要求提供上述导航栏的建议/链接或示例,以使其不推送内容。

【问题讨论】:

  • 如果导航栏不推送内容,部分内容会在导航栏后面消失。或者你想要一个像这样的固定导航栏:getbootstrap.com/docs/3.3/examples/navbar-fixed-top
  • 是的,我想在滑动导航栏后面隐藏一段时间的内容。我不需要固定导航栏,

标签: css twitter-bootstrap


【解决方案1】:

如果使用 CSS 将导航栏设置为绝对左上角,则不会推送内容:

.navbar {position:absolute;top:0;left:0;}

如果您希望这仅在桌面上发生,请将规则集放在媒体查询中,如下所示:

@media (min-width: 765px) {
    .navbar {position:absolute;top:0;left:0;}
}

如果您想在所有屏幕尺寸(包括桌面)上显示汉堡菜单(显示/隐藏菜单),请查看this question

【讨论】:

  • 太棒了!它工作完美,但我需要将 z-index 添加到导航栏。谢谢!
  • 是的。如果您的内容使用 z-index 值,则导航栏需要大于内容的 z-index。
猜你喜欢
  • 2014-09-20
  • 1970-01-01
  • 1970-01-01
  • 2018-04-28
  • 2017-08-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多