Bootstrap的Scrollspy根本不工作

-1

我需要幫助設置Bootstrap的Scrollspy。我遵循了文檔中的準則，但沒有奏效。請幫我找到解決這個問題Bootstrap的Scrollspy根本不工作

我使用的數據在體內元素屬性和設置位置相對這是我的HTML代碼：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> 
<link href="https://fonts.googleapis.com/css?family=Fascinate+Inline|Anton|Raleway:200|Megrim" rel="stylesheet"> 

<style> 
body { 
    height: 100vh; 
    background: url("https://image.ibb.co/i1Qu1R/Adobe_Stock_123146928.png") no-repeat fixed; 
    background-size: cover; 
    position: relative; 
    top: 121px; 
} 
.active { 
    color: black !important; 
</style> 

<nav id="main-nav" class="nav justify-content-end fixed-top"> 
    <!-- nav-fill nav-justified flex-column flex-md-row--> 
    <a href="#" class="navbar-brand">marouane <span>rassili</span></a> 
    <a href="#home" class="nav-link home active"> 
     <!-- flex-md-fill text-md-center"-->Home</a> 
    <a href="#gallery" class="nav-link gallery"> 
     <!-- flex-md-fill text-md-center"-->Gallery</a> 
    <a href="#about" class="nav-link about"> 
     <!-- flex-md-fill text-md-center"-->About</a> 
    <a href="#contact" class="nav-link contact"> 
     <!-- flex-md-fill text-md-center"-->Contact</a> 
</nav> 


<body data-spy="scroll" data-target="#main-nav"> 
<section id="home"> 
    <div class="text-center"> 
    <h1>HOME</h1> 
    </div> 
</section> 
<section id="gallery"> 
    <div class="text-center"> 
    <h1>GALLERY</h1> 
    </div> 
</section> 
<section id="about"> 
    <div class="text-center"> 
    <h1>ABOUT ME</h1> 
    </div> 
</section> 
<section id="contact"> 
    <div class="text-center"> 
    <h1>CONTACT ME</h1> 
    </div> 
</section>

（我用Codepen）

來源

2017-10-16 mrassili

請更正您的標記以下建議：

把#main-nav內body
爲每個部分添加一些內容（或僅通過CSS的高度），以創建一個可滾動的視口。
import Bootstrap 4需要JS文件來運行scrollspy組件邏輯。
右括號添加到.active CSS規則
使用元素html，head創建HTML標記，並記得關閉body標籤（現代瀏覽器呈現無效的HTML比較精細，但它鼓勵遵循的標記規則和最佳實踐避免進一步的問題）

我已經創建了

來源

2017-10-17 00:03:56

你可以把它放在我的筆工作實施https://codepen.io/ZorphDark/pen/mBQwYZ的變化codepen：https://codepen.io/mrassili/pen/LzzRxw – mrassili

Bootstrap的Scrollspy根本不工作

回答

相關問題