Mat*_*man 336 html twitter-bootstrap
我在我的网站上使用bootstrap并且导航栏固定顶部有问题.当我只使用常规导航栏时,一切都很好.但是,当我尝试将其切换到导航栏固定顶部时,网站上的所有其他内容都会向上移动,就像导航栏不在那里而导航栏重叠一样.这基本上是我如何摆脱它:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我试图准确复制bootstraps示例,但只有在使用navbar固定顶部时才会出现此问题.我究竟做错了什么？
rfu*_*duk 504
您的答案在文档中是正确的:
需要身体填充
固定的导航栏将覆盖您的其他内容,除非您添加
padding到顶部<body>.尝试自己的价值观或使用下面的代码段.提示:默认情况下,导航栏高50像素.Run Code Online (Sandbox Code Playgroud)body { padding-top: 70px; }确保在核心Bootstrap CSS 之后包含它.
并在Bootstrap 4文档中......
固定导航栏使用position:fixed,这意味着它们是从DOM的正常流程中拉出来的,并且可能需要自定义CSS(例如,填充顶部)以防止与其他元素重叠.
Nic*_*sby 122
正如其他人所说的那样,在身体上添加填充物效果很好.但是当你使屏幕更窄(手机宽度)时,导航栏和机身之间存在间隙.此外,拥挤的导航栏可以换行到多行条,再次覆盖部分内容.
这为我解决了这些问题
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
这默认为40px填充,宽度低于768px时为0px(根据bootstrap的文档是手机布局截止,将创建间隙)
cat*_*sky 34
一个更方便的解决方案供您参考,它在我的所有项目中都很完美:
改变你的第一行
.navbar.navbar-fixed-top
至
.navbar.navbar-default.navbar-static-top
dav*_*rac 25
这个问题是众所周知的,并且twitter bootstrap网站中有一个解决方法:
当您粘贴导航栏时,请记住考虑下面的隐藏区域.添加40px或更多的填充到
<body>.一定要在核心Bootstrap CSS之后和可选的响应式CSS之前添加它.
这对我有用:
body { padding-top: 40px; }
Ara*_*yan 24
@Ryan,你是对的,硬编码高度将使它在自定义导航栏的情况下工作不好.这是我为BS 3.0.0愉快地使用的代码:
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
Dan*_*Dan 20
我把它放在yield容器之前:
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
我喜欢这种方法,因为它记录了使其工作所需的黑客,而且它也适用于移动导航.
编辑 - 这效果更好:
@media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
Tom*_*bes 16
问题在于navbar-fixed-top,除非指定body-padding,否则它将覆盖您的内容.此处未提供解决方案适用于100%的情况.页面加载后,JQuery解决方案会闪烁/移动页面,这看起来很奇怪.
对我来说真正的解决方案是不使用navbar-fixed-top,而是使用navbar-static-top.
.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron
<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
Jas*_*ler 16
正如我在一个类似的问题中发布的那样,我在真正的固定导航栏之前创建了一个虚拟的非固定导航栏,取得了很大的成功.
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
所有屏幕尺寸的间距都很大.
Rya*_*yan 14
所有以前的解决方案都以一种方式或另一种方式将40像素硬编码到html或CSS中.如果导航栏包含不同的字体大小或图像,该怎么办？如果我有充分的理由不首先弄乱身体填充物怎么办？我一直在寻找这个问题的解决方案,这就是我想出的:
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
您可以通过调整"1"来上移或下移.无论在调整大小之前和之后导航栏中的内容大小,它似乎对我有用.
我很好奇其他人对此的看法:请分享你的想法.(它将被重构为不重复,顺便说一下.)除了使用jQuery之外,还有其他原因不能以这种方式解决问题吗？我甚至使用这样的辅助导航栏:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS:上面是在Bootstrap 2.3.2上 - 它会在3.x中工作只要通用类名仍然存在......实际上它应该独立于bootstrap工作,对吧？
编辑:这是一个完整的jquery函数,处理动态大小的两个堆叠,响应式固定导航栏.它需要3个html类(或者可以使用id):user-top,admin-top和contentwrap:
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});
Ric*_*ick 13
Bootstrap 4的解决方案,它在我的所有项目中都很完美:
改变你的第一行
navbar-fixed-top
至
sticky-top
关于他们这样做的时间:D
Oli*_*nig 11
要处理菜单栏中的包装线,请将id应用于导航栏,如下所示:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">
在包含jquery之后将这个小脚本添加到头部,如下所示:
<script>
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
});
});
</script>
这样,身体的顶部填充会自动调整.
| 归档时间： |
|
| 查看次数： |
276860 次 |
| 最近记录： |