如何修復與自舉網站類似的側欄？

我需要創建一個完全像getbootstrap.com中的邊欄的邊欄。我遵循網站上的說明並創建了一個側欄。如何修復與自舉網站類似的側欄？

但問題是，它重疊了頁腳內容。同時滾動粘貼的側邊欄和單獨的內容將滾動，當它到達頁腳時，詞綴不會移除，但它在頁腳部分重疊。

有人可以幫我解決這個錯誤。

我使用下面的代碼，

<body data-spy="scroll" data-target="#leftCol"> 

    <div role="complementary" id="leftCol"> 
      <ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" data-offset-top="125"> 
       <li><a href="#feature1">Feature1</a></li> 
       <li><a href="#feature1">Feature1</a></li> 
       <li><a href="#feature1">Feature1</a></li> 
       <li><a href="#feature1">Feature1</a></li> 
      </ul> 
    </div> 
</body>

我使用下面的CSS，

/* Custom Styles */ 
ul.nav-tabs { 
width: 275px; 
margin-top: 30px; 
border-radius: 4px; 
border: 1px solid #ddd; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); 
} 
ul.nav-tabs li { 
margin: 0; 
border-top: 1px solid #ddd; 
} 
ul.nav-tabs li:first-child { 
border-top: none; 
} 
ul.nav-tabs li a { 
margin: 0; 
padding: 8px 16px; 
border-radius: 0; 
} 
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover { 
color: #fff; 
background: #0088cc; 
border: 1px solid #0088cc; 
} 
ul.nav-tabs li:first-child a { 
border-radius: 4px 4px 0 0; 
} 
ul.nav-tabs li:last-child a { 
border-radius: 0 0 4px 4px; 
} 
ul.nav-tabs.affix { 
top: 30px; /* Set the top position of pinned element */ 

}

我稱爲上面的代碼從this鏈路。

在此先感謝！

來源

2014-09-04 Gopinath Perumal

可否請您提供重現問題的代碼？ – 2014-09-05 09:58:13

編輯：

也不要忘了加載所有CSS和JavaScript文件。 該代碼在http://www.tutorialrepublic.com中進行了測試。

來源

2014-09-04 11:46:09 Kristiyan

認真??你正在向一個標籤提供兩個ID！ – 2014-09-04 11:49:32

我在發佈後編輯了我的帖子。請重新加載。 – Kristiyan 2014-09-04 11:51:09

如何修復與自舉網站類似的側欄？

回答

相關問題