Bootstrap - navbar-fixed-top 覆盖内容
Posted
技术标签:
【中文标题】Bootstrap - navbar-fixed-top 覆盖内容【英文标题】:Bootstrap - navbar-fixed-top covers content 【发布时间】:2013-11-13 12:04:07 【问题描述】:我有一个关于 navbar-fixed-top 的问题。好吧,我有一个简单的问题。我的固定导航栏涵盖了内容,例如在“关于我们”页面中,它涵盖了带有“关于我们”标题的行。
我不知道如何修复它,因为当我调整网站大小(移动设备大小)时,标题是可见的。
当然,我在其他页面(全宽和 404)中的标题有这种问题。
另外,在索引页面,它覆盖了一些轮播滑块。
信息:
网站:http://testerix.site90.com/index.html
引导程序 2.3.2
让我知道,我怎样才能在所有分辨率上修复它。
【问题讨论】:
这个问题有几个副本***.com/questions/11124777/…说添加这个css:body padding-top:40px; @media screen and (max-width: 768px) body padding-top: 0px; ____________________________________________________________________ ***.com/questions/10336194/… 这对我有用:对于引导程序 3,navbar-static-top 而不是 fixed 可以防止此问题,除非您需要导航栏始终可见 【参考方案1】:响应在页面中:
Twitter Bootstrap - top nav bar blocking top content of the page
添加到您的 CSS:
body
padding-top: 65px;
或更复杂但响应迅速的解决方案,如果您的导航栏更改高度(平板电脑中的 ex 出现在 60 像素以上;或者不同),请使用带有 css 和 javascript 的混合解决方案
CSS:
#godown
height: 60px;
HTML(简历)
<body>
<nav class="navbar navbar-fixed-top " role="navigation" id="navMenu">
...
</nav>
<!-- This div make the magic :) -->
<div class="godown-60" id="godown"></div>
<!-- the rest of your site -->
...
JAVASCRIPT:
<script>
//insert this in your jquery
//control the resizing of menu and go down the content in the correct position
$("#navMenu").resize(function ()
$('#godown').height($("#navMenu").height() + 10);
);
if ($("#navMenu").height() > $('#godown').height()) $('#godown').height($("#navMenu").height() + 10);
</script>
【讨论】:
为我工作,但感觉很老套。【参考方案2】:试试 class="navbar-static-top"。它仍然允许导航栏保持在顶部,但不会阻止内容。
【讨论】:
是的,但它会停止粘性效果,因此当您向下滚动时,您会丢失导航栏。 谢谢!这行得通,但是是的,您可能会失去持久的“粘性”导航栏功能。【参考方案3】:我会这样做:
// add appropriate media query if required to target mobile nav only
.nav overflow-y: hidden !important
这应该确保导航块不会向下延伸并覆盖页面内容。
【讨论】:
真的不是解决办法。导航块做改变。你不想阻止它。【参考方案4】:position: sticky
而不是 position: static
对我有用。
【讨论】:
【参考方案5】:只需在内容中添加一个 id 或类,然后给它一个足够的边距,以使内容显示而不受静态导航栏的阻碍,并添加“!important”属性使其工作.....
【讨论】:
【参考方案6】:可以将 body 的 paddingTop 变量设置为导航栏的高度也可以工作,因此比固定的 60/65px 值响应更快。
let padding = $("nav").height() + "px";
一个实际的例子是 Bootstrap .navbar-toogler 按钮并向其添加点击事件和 setTimeout 函数,该函数允许更改高度,然后将新值作为 paddingTop 应用到主体。
jQuery:
$(".navbar-toggler").click(function()
setTimeout(function()
let padding = $("nav").height() + "px";
$("body").css("paddingTop", padding)
, 500)
)
vanillaJS:
document.querySelector(".navbar-toggler").onclick = function()
setTimeout(function()
let padding = document.querySelector("nav").offsetHeight + "px";
document.body.style.paddingTop=padding;
, 500)
;
【讨论】:
【参考方案7】:var navHeight = $("#menu").height();
$("body").css(paddingTop: (navHeight+12)+'px');
试试这个简单的方法。
【讨论】:
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于Bootstrap - navbar-fixed-top 覆盖内容的主要内容,如果未能解决你的问题,请参考以下文章