固定邊欄導航流體twitter引導2.0

Question

是否有可能使側邊欄導航保持始終固定在流體佈局滾動？

Answer 1

注：有一個引導的jQuery插件，這是否和這麼多這是推出了幾個版本這個答案寫後（兩年前）叫Affix。只有在使用Bootstrap 2.0.4或更低版本時，此答案才適用。

---

是，只需創建您的側邊欄新的固定類，並添加偏移種類將您的內容div來彌補左邊距，像這樣：

CSS

.sidebar-nav-fixed { 
    padding: 9px 0; 
    position:fixed; 
    left:20px; 
    top:60px; 
    width:250px; 
} 

.row-fluid > .span-fixed-sidebar { 
    margin-left: 290px; 
} 

演示：http://jsfiddle.net/U8HGz/1/show/ 編輯在這裏：http://jsfiddle.net/U8HGz/1/

更新

修復了我的演示，以支持響應式引導表，現在它與引導程序的響應功能一起流動。

注意：本演示使用頂級固定導航欄，因此在屏幕調整大小時，這兩個元素都將變爲position:static，我放置了另一個演示，以維護固定的側邊欄，直到移動視圖的屏幕落下。

CSS

.sidebar-nav-fixed { 
    position:fixed; 
    top:60px; 
    width:21.97%; 
} 

@media (max-width: 767px) { 
    .sidebar-nav-fixed { 
     width:auto; 
    } 
} 

@media (max-width: 979px) { 
    .sidebar-nav-fixed { 
     position:static; 
     width: auto; 
    } 
} 

HTML

<div class="container-fluid"> 
<div class="row-fluid"> 
<div class="span3"> 
    <div class="well sidebar-nav sidebar-nav-fixed"> 
    ... 
    </div><!--/.well --> 
</div><!--/span--> 
<div class="span9"> 
    ... 
</div><!--/span--> 
</div><!--/row--> 

</div><!--/.fluid-container--> 

Demo，編輯here。

^{小調：固定側欄的寬度大約有10px/1％的差異，其原因是由於它沒有從span3容器div繼承寬度，因爲它是固定的我有想出一個寬度。它足夠接近。}

這裏是另一種方法，如果你想保持側邊欄固定，直到網格掉落爲小屏幕/移動視圖。

CSS

.sidebar-nav-fixed { 
    position:fixed; 
    top:60px; 
    width:21.97%; 
} 

@media (max-width: 767px) { 
    .sidebar-nav-fixed { 
     position:static; 
     width:auto; 
    } 
} 

@media (max-width: 979px) { 
    .sidebar-nav-fixed { 
     top:70px; 
    } 
} 

Demo，編輯here。

Answer 2

這會搞砸響應網頁設計。 更好地在媒體查詢中包裝固定邊欄。

CSS

@media (min-width: 768px) { 
    .sb-fixed{ 
    position: fixed; 
    } 
} 

HTML

<div class="span3 sb-fixed"> 
    <div class="well sidebar-nav"> 
     <!-- Sidebar Contents --> 
    </div> 
</div> 

現在側邊欄只有固定的，如果viewpot是更大然後768px。

Answer 3

我開始與安德烈的答案，並最終得到一個棘手的側邊欄是這樣的：

HTML：

<div class="span3 sidebar-width"> 
    <div class="well sidebar-nav-fixed"> 
    Sidebar 
    </div> 
</div> 

<div class="span9 span-fixed-sidebar"> 
    Content 
</div> <!-- /span --> 

CSS：

.sidebar-nav-fixed { 
    position:fixed; 
} 

JS/jQuery的：

sidebarwidth = $(".sidebar-width").css('width'); 
$('.sidebar-nav-fixed').css('width', sidebarwidth); 
contentmargin = parseInt(sidebarwidth) + 60; 
$('.span-fixed-sidebar').css('marginLeft', contentmargin); 

我假設我還需要JS在更改視口大小時更新'sidebarwidth'變量。

Answer 4

很容易得到修復導航或所有你想要的標籤。所有你需要的是這樣寫的修復標籤，並把它在你的身體部分

<div style="position: fixed"> 
     test - try scroll again. 
    </div> 

Answer 5

最新的自舉（2.1.0）有一個新的JS「粘貼」功能專門針對這種類型的應用，FYI 。

Answer 6

這是不可能的，沒有JavaScript。我覺得affix.js太複雜了，所以我寧願用：

stickyfloat

Answer 7

隨着當前引導版本（3.3.2）有一個很好的方式，以實現導航的固定側邊欄。

該解決方案也適用於重新引入的容器流體類，這意味着它可以很容易地具有響應式全屏佈局。

通常情況下，您需要使用固定的寬度和邊距，否則導航會重疊內容，但在空佔位符欄的幫助下，內容始終位於正確的位置。

當您將窗口大小調整到小於768像素並釋放固定導航時，下面的設置會將內容包裹起來。

查看http://www.bootply.com/ePvnTy1VII作爲一個工作示例。

CSS

@media (min-width: 767px) { 
    #navigation{ 
     position: fixed; 
    } 
} 

HTML

<div class="container-fluid"> 
<div class="row"> 
    <div id="navigation" class="col-lg-2 col-md-3 col-sm-3"> 
    <ul> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 1</a></li> 
    </ul> 
    </div> 

    <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs"> 
    <!-- Placeholder - keep empty --> 
    </div> 

    <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill"> 
    ... 
    Huge Content 
    ... 
    </div> 
</div> 
</div>