css - Bootstrap 3-使垂直导航栏不推送网站内容

标签 css twitter-bootstrap

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

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

我知道在网上或论坛上必须有通讯员的帖子,但我找不到。我要求建议/链接或上面导航栏的示例,以使其不推送内容。

最佳答案

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

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

如果您只想在桌面上发生这种情况,请将规则集放入媒体查询中,如下所示:

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

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

关于css - Bootstrap 3-使垂直导航栏不推送网站内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45803175/

相关文章:

javascript - jQuery 滚动到 anchor 异常

javascript - Bootstrap Alert 只显示一次

css - 在 xs 屏幕尺寸下发现可折叠的导航菜单链接

css - 使用 Twitter Bootstrap 将右侧内容移动到左侧

css - 带滚动条的侧边栏菜单隐藏下拉菜单

android - CSS 布局是如何变得流畅的?

HTML\CSS 未使用的空格

javascript - 如何强制 VueJS 在 css 中不生成 "*,::after,::before"元素

css - IE Ul LI 填充?

ios - iOS/WKWebView 上 SVG 的随机故障渲染