Bootstrap导航栏在链接时覆盖部分的顶部 [英] Bootstrap navbar covers top of section when linked
本文介绍了Bootstrap导航栏在链接时覆盖部分的顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在为了学习目的而在第一个网站上工作，并遇到这个问题：
每当我链接到同一页面上的特定位置时，如预期的那样，但顶部覆盖有导航栏。
< body data-spy =scrolldata-target =＃myNavbardata-offset =50> ;
< nav id =myNavbarrole =navigationclass =container-fluid navbar navbar-default navbar-fixed-top>
< div class =container>
< div class =navbar-header>
< button type =buttondata-target =＃navbarCollapsedata-toggle =collapseclass =navbar-toggle>
< span class =sr-only>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< a href =＃class =navbar-brand>< / a>
< / div>
< div id =navbarCollapseclass =collapse navbar-collapse>
< ul class =nav navbar-nav navbar-right>
< li>< a href =＃section1>主页< / a>< / li>
< li>< a href =＃section2>关于< / a>< / li>
< li>< a href =＃section3>投资组合< / a>< / li>
< li>< a href =＃section4>联络人< / a>< / li>
< / ul>
< / div>
< / div>
< / nav>
< div class =jumbotronid =section1>
< h1 class =header>< / h1>
< hr class =style/>
< un class =list-inline>
< li>
< a href =＃>
< span class =glyphicon glyphicon-chevron-left>< / span> Facebook
< span class =glyphicon glyphicon-chevron-right>< / span>
< / a>
< / li>
< li>
< a href =＃>
< span class =glyphicon glyphicon-chevron-left>< / span> GitHub
< span class =glyphicon glyphicon-chevron-right>< / span>
< / a>
< / li>
< li>
< a href =＃>
< span class =glyphicon glyphicon-chevron-left>< / span> LinkedIn
< span class =glyphicon glyphicon-chevron-right>< / span>
< / a>
< / li>
< / un>
< / div>
< / body>
有没有什么方法可以让它在导航栏下面链接，这样它就不会覆盖顶部部分？
曾尝试使用身体的填充顶部，但没用。
通过链接到单独的div并通过CSS来调整它们来解决这个问题，但是在执行了引导scrollspy div后，覆盖整个部分的内容就会被定位，这样问题就会被解决。）
PS：没有使用JS / Query。
解决方案
这可能有助于或给你一些想法;你基本上只是在一个 navbar-fixed-top 类下一起使用两个navbars，然后它们一起滚动。
body {margin-top：100px; position：relative;}。navbar.nav-lower {height：20px;背景：＃f5f5f5; border-radius：0; border：none; margin-bottom：0;}。nav-lower .navbar-toggle，.nav-lower .navbar-toggle：focus，.nav-lower .navbar-toggle：hover {border：none;背景：无;}。navbar.nav-lower> li {display：inline-block;宽度：33％; text-align：center;}＃section1 {padding-top：100px;身高：500px;颜色：#fff; background-color：＃1E88E5;}＃section2 {padding-top：100px;身高：500px;颜色：#fff; background-color：＃673ab7;}＃section3 {padding-top：100px;身高：500px;颜色：#fff; background-color：＃ff9800;}＃section4 {padding-top：100px;身高：500px;颜色：#fff; background-color：＃00bcd4;} @ media（max-width：767px）{.nav-lower .navbar-collapse {text-align：left;背景：＃f5f5f5; }} @ media（min-width：767px）{.navbar.navbar-default.nav-lower .navbar-inner {padding：0; } .navbar.navbar-default.nav-lower .nav {margin：0;显示：表格;宽度：100％; } .navbar.navbar-default.nav-lower .nav> li {display：table-cell; float：none; } .navbar.navbar-default.nav-lower .nav> li> {text-align：center; }}
< script src =https：// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5 />< body data-spy =scrolldata-target =＃myNavbardata-offset =100> < nav class =navbar navbar-default navbar-custom navbar-fixed-topid =myNavbar> < div class =container> <！ - 品牌和切换分组以获得更好的移动展示效果 - > < div class =navbar-header> < button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1aria-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-brandhref =＃>品牌< / a> < / DIV> <！ - 收集导航链接，表单和其他内容以进行切换 - > < div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> < ul class =nav navbar-nav navbar-right> < li class =active>< a href =＃section1>主页< / a> < /锂> < li>< a href =＃section2>关于< / a> < /锂> < li>< a href =＃section3>投资组合< / a> < /锂> < li>< a href =＃section4>联络人< / a> < /锂> < / UL> < / DIV> <！ - /.navbar-collapse - > < / DIV> <！ - /.container-fluid - > < nav class =navbar navbar-default nav-lower> < div class =navbar-header> < button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃bs-lower-navaria-expanded =false> < span class =sr-only>切换导航< / span> < span class =glyphicon glyphicon-chevron-down>< / span> < /按钮> < / DIV> < div class =collapse navbar-collapseid =bs-lower-nav> < ul class =nav navbar-nav> <李> < a href =＃> < span class =glyphicon glyphicon-chevron-left>< / span> Facebook< span class =glyphicon glyphicon-chevron-right>< / span> < / A> < /锂> <李> < a href =＃> < span class =glyphicon glyphicon-chevron-left>< / span> GitHub< span class =glyphicon glyphicon-chevron-right>< / span> < / A> < /锂> < li>< a href =＃>< span class =glyphicon glyphicon-chevron-left>< / span> LinkedIn< span class =glyphicon glyphicon-chevron-right>< / span>< / a> < /锂> < / UL> < / DIV> < / NAV> < / NAV> < div id =section1class =container-fluid> < h1>第1部分< / h1> < p>尝试滚动此部分并在滚动时查看导航栏！尝试滚动此部分并在滚动时查看导航栏！< / p> < p>尝试滚动此部分并在滚动时查看导航栏！尝试滚动此部分并在滚动时查看导航栏！< / p> < / DIV> < div id =section2class =container-fluid> < h1>第2部分< / h1> < p>尝试滚动此部分并在滚动时查看导航栏！尝试滚动此部分并在滚动时查看导航栏！< / p> < p>尝试滚动此部分并在滚动时查看导航栏！尝试滚动此部分并在滚动时查看导航栏！< / p> < / DIV> < div id =section3class =container-fluid> < h1>第3部分< / h1> < p>尝试滚动此部分并在滚动时查看导航栏！尝试滚动此部分并在滚动时查看导航栏！< / p> < p>尝试滚动此部分并在滚动时查看导航栏！尝试滚动此部分并在滚动时查看导航栏！< / p> < / DIV> < div id =section4class =container-fluid> < h1>第4部分< / h1> < p>尝试滚动此部分并在滚动时查看导航栏！尝试滚动此部分并在滚动时查看导航栏！< / p> < p>尝试滚动此部分并在滚动时查看导航栏！尝试滚动此部分并在滚动时查看导航栏！< / p> < / body>
I've been working on my first website for learning purposes and run into this problem:
Whenever I link to a specific place on the same page it opens up as intended but the top is covered with navbar.
<body data-spy="scroll" data-target="#myNavbar" data-offset="50">
<nav id="myNavbar" role="navigation" class="container-fluid navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"></a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#section1">Home</a></li>
<li><a href="#section2">About</a></li>
<li><a href="#section3">Portfolio</a></li>
<li><a href="#section4">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron" id="section1">
<h1 class="header"></h1>
<hr class="style" />
<un class="list-inline">
<li>
<a href="#">
<span class="glyphicon glyphicon-chevron-left"></span> Facebook
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-chevron-left"></span> GitHub
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-chevron-left"></span> LinkedIn
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</li>
</un>
</div>
</body>
Is there any way to make it link below the navbar so that it wouldn't cover the top of section?
Have tried playing with body's padding-top but to no use.
(I was able to solve this by linking to separate divs and adjusting them vie CSS, but after the implementation of bootstrap scrollspy divs that cover whole section had o be targeted, thus the problem returned.)
P.S.: no JS/Query has been used.
解决方案
This might help or give you some ideas; you're essentially just using two navbars together under a navbar-fixed-top class so they're then together on scroll.
body {
margin-top: 100px;
position: relative;
}
.navbar.nav-lower {
height: 20px;
background: #f5f5f5;
border-radius: 0;
border: none;
margin-bottom: 0;
}
.nav-lower .navbar-toggle,
.nav-lower .navbar-toggle:focus,
.nav-lower .navbar-toggle:hover {
border: none;
background: none;
}
.navbar.nav-lower > li {
display: inline-block;
width: 33%;
text-align: center;
}
#section1 {
padding-top: 100px;
height: 500px;
color: #fff;
background-color: #1E88E5;
}
#section2 {
padding-top: 100px;
height: 500px;
color: #fff;
background-color: #673ab7;
}
#section3 {
padding-top: 100px;
height: 500px;
color: #fff;
background-color: #ff9800;
}
#section4 {
padding-top: 100px;
height: 500px;
color: #fff;
background-color: #00bcd4;
}
@media (max-width: 767px) {
.nav-lower .navbar-collapse {
text-align: left;
background: #f5f5f5;
}
}
@media (min-width: 767px) {
.navbar.navbar-default.nav-lower .navbar-inner {
padding: 0;
}
.navbar.navbar-default.nav-lower .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar.navbar-default.nav-lower .nav > li {
display: table-cell;
float: none;
}
.navbar.navbar-default.nav-lower .nav > li > a {
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<body data-spy="scroll" data-target="#myNavbar" data-offset="100">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" id="myNavbar">
<div class="container">
<!-- 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 navbar-right">
<li class="active"><a href="#section1">Home</a>
</li>
<li><a href="#section2">About</a>
</li>
<li><a href="#section3">Portfolio</a>
</li>
<li><a href="#section4">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
<nav class="navbar navbar-default nav-lower">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-lower-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-lower-nav">
<ul class="nav navbar-nav">
<li>
<a href="#"> <span class="glyphicon glyphicon-chevron-left"></span> Facebook
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</li>
<li>
<a href="#"> <span class="glyphicon glyphicon-chevron-left"></span> GitHub
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-left"></span> LinkedIn
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
</ul>
</div>
</nav>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section4" class="container-fluid">
<h1>Section 4</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
这篇关于Bootstrap导航栏在链接时覆盖部分的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
