固定在顶部导航栏覆盖网站上的引导程序 [英] Bootstrap fixed to top navbar covering website
问题描述
因为我将这个导航栏用作站点编辑工具，而不是普通的导航栏，所以我需要一个不涉及编辑Bootstrap代码，而是使用某种类型的 style =" 的解决方案进行编辑，因为我将其他地方的Bootstrap代码包括在内以使事情更轻松，所以我可以在多个站点上使用它.
我正在尝试阻止固定在顶部的 Navbar覆盖网站的顶部，这显示了Navbar下的徽标和顶部链接，而我想尝试将其分层放置顶部，直到用户向下滚动导航栏，然后导航栏就会覆盖该网站，因为它应该沿其向下的方向移动.这是我正在使用的代码，如果有人可以帮助我找到解决方案，我将不胜感激！
< link rel ="stylesheet" href ="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">< script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>< script src ="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"</script>< nav class ="navbar navbar-default navbar-fixed-top">< div class ="container-fluid"><！-将品牌和切换按钮分组，以获得更好的移动显示效果->< div class ="navbar-header">< button type ="button" class ="navbar-toggle折叠" data-toggle ="collapse" data-target =#bs-example-navbar-collapse-1" aria-expanded ="false">< span class ="sr-only">切换导航</span>< span class ="icon-bar"></span>< span class ="icon-bar"></span>< span class ="icon-bar"></span></button>< a class ="navbar-brand" href =#">品牌</a></div><！-收集导航链接，表单和其他内容以进行切换->< div class ="collapse navbar-collapse" id ="bs-example-navbar-collapse-1">< ul class ="nav navbar-nav">< li class ="active">< a href =#">链接< span class ="sr-only">(当前)</span></a></li>;< li>< a href =#">链接</a></li>< li class ="dropdown">< a href =#" class ="dropdown-toggle" data-toggle ="dropdown" role ="button" aria-haspopup ="true" aria-expanded ="false"> Dropdown< span class =插入符号"/"span"/a.< ul class ="dropdown-menu">< li>< a href =#"> Action</a></li>< li>< a href =#">另一个动作</a></li>< li>< a href =#">这里还有其他事情</a></li>< li role ="separator" class ="divider"></li>< li>< a href =#">分隔链接</a></li>< li role ="separator" class ="divider"></li>< li>< a href =#">另一个独立的链接</a></li></ul></li></ul>< form class ="navbar-form navbar-left" role ="search">< div class ="form-group">< input type ="text" class ="form-control"占位符="Search"></div>< button type ="submit" class ="btn btn-default"> Submit</button></form>< ul class ="nav navbar-nav navbar-right">< li>< a href =#">链接</a></li>< li class ="dropdown">< a href =#" class ="dropdown-toggle" data-toggle ="dropdown" role ="button" aria-haspopup ="true" aria-expanded ="false"> Dropdown< span class =插入符号&";/span>/a;< ul class ="dropdown-menu">< li>< a href =#"> Action</a></li>< li>< a href =#">另一个动作</a></li>< li>< a href =#">这里还有其他事情</a></li>< li role ="separator" class ="divider"></li>< li>< a href =#">分隔链接</a></li></ul></li></ul></div><！-/.navbar-collapse-></div><！-/.container-fluid-></nav> 我试图介绍:
style ="padding-top:100px;" 并更改了 px 但没有运气，但这完全覆盖了网站的顶部.
您只需要在 body 而不是 div 上应用填充样式:
< body style ="padding-top:100px"> 它在文档中给出: http://getbootstrap.com/components/#navbar-固定顶:-)
需要身体填充
固定的导航栏将覆盖您的其他导航栏内容，除非您在
< body>的顶部添加padding.试试你的自己的值或使用下面的代码段.提示:默认情况下，导航栏为50像素高.
body {padding-top:70px;}确保在此之后核心Bootstrap CSS.
Because I am using this Navbar as a site editing tool rather than a normal Navbar, I require a solution that doesn't involve editing the Bootstrap code and instead use some type of style="" edit instead as I am including the Bootstrap code from elsewhere to make things light, so I can use it on multiple sites.
I am trying to stop the fixed to top Navbar from overlaying the top of the website, this is showing the Logo and top links under the Navbar, instead I am looking to try to layer it on top until the user scrolls down where the Navbar will then cover the website as it should on its way down. Here is the code I am using, if anybody can help me find a solution I would be appreciative!
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I have attempted to introduce:
style="padding-top:100px;" And changed the px but with no luck, this then totally covers the top of the websites.
You just have to apply the padding style at the body instead the div:
<body style="padding-top: 100px">
It's given in the docs: http://getbootstrap.com/components/#navbar-fixed-top :-)
Body padding required
The fixed navbar will overlay your other content, unless you add
paddingto the top of the<body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }Make sure to include this after the core Bootstrap CSS.
这篇关于固定在顶部导航栏覆盖网站上的引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
