Twitter的引導，當我向下滾動

我想創建一個類似Twitter的引導文件的那些側邊欄貼欄崩潰：http://twitter.github.com/bootstrap/getting-started.html Twitter的引導，當我向下滾動

我有詞綴的工作和所有，但每當你滾過數據 - 抵消酒吧崩潰，因爲它沒有。

HTML

<div class="span3"> 
      <ul data-spy="affix" data-offset-top="255" class="nav nav-tabs nav-stacked docs-sidebar" id="navbar"> 
      <li><a href="#grid">Grid system <i class="icon-chevron-right pull-right"></i></a></li> 
      <li><a href="#fluidGridSystem">Fluid grid system <i class="icon-chevron-right pull-right"></i></a></li> 
      <li><a href="#layouts">Layouts <i class="icon-chevron-right pull-right"></i></a></li> 
      <li><a href="#responsive">Responsive design <i class="icon-chevron-right pull-right"></i></a></li> 
      </ul> 
      <p></p> 
     </div>

LESS

// For Affix plugin 
.affix { 
    position: fixed; 
    top: (@navbarHeight * 1.8) + @navbarPadding + 25px; 
} 

.docs-sidebar { 
    width: (@gridColumnWidth * 4); 
}

這使得側邊欄固定span4寬度，但並不能使它響應。我如何確保它的響應？

來源

2012-10-16 Andrew Richardson

我有這個相同的問題。我採取了使用媒體查詢來替換帶有響應式導航欄的詞綴邊欄。但是如果你檢查引導頁面，你可以看到他們是如何做到的。 – noel

我也試圖找出最好的方法來做到這一點。這是我所做的。也許不是最好的解決方案，但它的工作。

我有一個兩列布局，我想讓左邊的.affix。我拉着柱子將其固定在行外，並將其放在原來的行上。我通過添加.offset3將剩餘的列移回原位。我把.affix放在列div而不是ul上。然後我用位置爲絕對的CSS將固定列包裝在一個div中; （位於.row div和.col3 div之外）這使得兩個.row div重疊，其中一個是固定的，另一個是滾動。

來源

2013-03-23 17:39:20

Twitter的引導，當我向下滾動

回答

相關問題