Bootstrap Scrollspy和Affix沒有響應並保留邊距

Question

我對引導很陌生，正在學校里體驗它。 但是我被卡住了。 我使用Affix插件找到了一個不錯的導航欄示例，但是當向下滾動詞綴時，不會應用我之前指定的相同邊距規則。 不知道我是否解釋正確，但我將通過屏幕截圖向您展示。

情況1：向下滾動之前的狀態（應該如何）

情況2：當我向下滾動時，會出現一個黑框，右邊距應位於該位置。

這是我的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>

Answer 1

一種實現方法：

將width: 100% affix類中的width: 100%更改為width: calc(100% - 4em); （因為您的身體有2 + 2ems的余量）。

Bootstrap Scrollspy和Affix沒有響應並保留邊距

問題描述

1 個解決方案

解決方案1
0 已采納 2015-10-18 22:33:51

Bootstrap Scrollspy和Affix沒有響應並保留邊距

問題描述

1 個解決方案

解決方案1 0 已采納 2015-10-18 22:33:51

解決方案1
0 已采納 2015-10-18 22:33:51