Bootstrap Scrollspy和Affix没有响应并保留边距
[英]Bootstrap Scrollspy & Affix not responding with body margin
问题描述
I'm pretty new to bootstrap and am experiencing with it for school. 
我对引导很陌生，正在学校里体验它。 However I got stuck. 但是我被卡住了。 I found a nice navbar example using the Affix plugin, however when you scroll down affix won't apply the same margin rules I specified before. 我使用Affix插件找到了一个不错的导航栏示例，但是当向下滚动词缀时，不会应用我之前指定的相同边距规则。 Not sure if I explain it right, but i'll show you with a screenshot. 不知道我是否解释正确，但我将通过屏幕截图向您展示。
Situation 1: How it's before scrolling down (how it should be) 情况1：向下滚动之前的状态（应该如何）
Situation 2: When I scroll down there appears a black box where the margin-right should be. 情况2：当我向下滚动时，会出现一个黑框，右边距应位于该位置。
And here's my index.html (PS Snippet doesn't work because it doesn't have the bootstrap css and js) 这是我的index.html（PS代码段不起作用，因为它没有引导CSS和JS）
@charset "utf-8"; /* CSS Document */ body { position: relative; margin: 0 auto; margin-left:2em; margin-right:2em; } .affix { top:0; width: 100%; z-index: 9999 !important; } .navbar { margin-bottom: 0px; } .navbar-right { margin-right: 20em; } .affix ~ .container-fluid { position: relative; top: 50px; } #biografie { padding-top:50px; height:40em; color: #fff; background-color: #1E88E5; } #portfolio { padding-top:50px; height:40em; color: #fff; background-color: #673ab7; } #contact { padding-top:50px; height:40em; color: #fff; background-color: #ff9800; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap - Prebuilt Layout</title> <!-- Bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet" type="text/css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body data-spy="scroll" data-target=".navbar" data-offset="30"> <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Scrollspy & Affix Example</h1> <h3>Fixed navbar on scroll</h3> <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p> <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p> </div> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Homepage</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#biografie">Biografie</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </div> </nav> <div id="biografie" class="container-fluid"> <h1>Biografie</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="portfolio" class="container-fluid"> <h1>Portfolio</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="contact" class="container-fluid"> <h1>Contact</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> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.11.2.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.js"></script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2015-10-18 22:33:51
One way to achieve that: 一种实现方法：
Change width: 100% in affix class to width: calc(100% - 4em); 将width: 100% affix类中的width: 100%更改为width: calc(100% - 4em); (because you have 2+2ems margin on body). （因为您的身体有2 + 2ems的余量）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.