Bootstrap ScrollSpy和鏈接無法正常工作

-1

這些天學習Bootstrap但遇到一些困難。Bootstrap ScrollSpy和鏈接無法正常工作

我想使用Bootstrap ScrollSpy，但它似乎並沒有工作，我不明白爲什麼。
如何在屏幕和手機中保持左列固定。
當我點擊一個鏈接後，我該如何保持它的活動？我使用的是「積極」級，但似乎它沒有任何效果....

html, body { 
 
    height: 100%; 
 
} 
 

 
.container-fluid { 
 
    height: 100%; 
 
} 
 

 
.row { 
 
    height: 100%; 
 
} 
 

 
.row > .left-column, 
 
.row > .right-column { 
 
    padding: 40px; 
 
} 
 

 
.left-column { 
 
    background-color: #A10020; 
 
    color: #fff; 
 
} 
 

 
#avatar, #social { 
 
    text-align: center; 
 
} 
 

 
img { 
 
    border: 1px solid #444; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin-bottom: 20px; 
 
    background-color: #fff; 
 
} 
 

 
.social-icon { 
 
    font-size: 36px; 
 
    padding: 0px 20px; 
 
} 
 

 
hr { 
 
    background-color: #EDEDF5; 
 
} 
 

 
.navbar { 
 
    text-align: center; 
 
    font-size: 18px; 
 
} 
 

 
a.nav-link { 
 
    color: #fff; 
 
} 
 

 
a.nav-link:hover, 
 
a.active { 
 
    color: #A10020 !important; 
 
    background-color: #fff; 
 
    font-weight: bold; 
 
} 
 

 
.right-column { 
 
    padding: 50px; 
 
    text-align: center; 
 
} 
 

 
.content { 
 
    padding:50px; 
 
    text-align: justify; 
 
    position: relative; 
 
} 
 

 
#about, #portfolio { 
 
    height: 100%; 
 
} 
 

 
@media screen and (min-width: 760px) 
 
{ 
 
    .left-column { 
 
    height: 100%; 
 
    position: fixed; 
 
    } 
 
    
 
    .right-column { 
 
    position: relative; 
 
    margin-left: 40%; 
 
    overflow-y: scroll; 
 
    height: 100%; 
 
    } 
 
} 
 

 
@media screen and (max-width: 760px) 
 
{ 
 

 
    
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 
<body data-spy="scroll" data-target="#navigation" data-offset="50"> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-5 left-column"> 
 
     <div id="avatar"> 
 
     </div> 
 
     <hr/> 
 
     <div id="navigation"> 
 
      <nav class="navbar"> 
 
      <ul class="nav"> 
 
       <li class="nav-item"><a href="#about" class="nav-link active">About</a></li> 
 
       <li class="nav-item"><a href="#portfolio" class="nav-link">Portfolio</a></li> 
 
      </ul> 
 
      </nav> 
 
     </div> 
 
     <hr/> 
 
     </div> 
 
     <div class="col-lg-7 right-column"> 
 
     <div id="about"> 
 
      <h2>Welcome</h2>  
 
      <div class="content"> 
 

 
      </div> 
 
     </div> 
 
     <div id="portfolio"> 
 
      <h2>Portfolio</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-03-26 coffeeak

jQuery的必須出現在引導JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

來源

2017-03-26 08:12:35

順序改變了，仍然沒有工作 – coffeeak

Bootstrap ScrollSpy和鏈接無法正常工作

回答

相關問題