帶流體佈局的Bootstrap Affix插件

如果我想在流體佈局中使用側邊欄的添加插件，但添加邊欄時寬度始終會發生變化，並且響應式設計也不起作用。帶流體佈局的Bootstrap Affix插件

在Bootstrap文檔中，詞綴插件不能用於流體佈局。也許是因爲他們有同樣的問題。

有人知道如何使它工作嗎？

2012-09-21 Toki

對於使用流體工作的帖子span3側邊欄，您需要添加一些javascript來限制寬度並管理調整大小。

我剛寫了一個小小的javascript函數來完成這個工作。

從bootstrap檢出this bug。

/* 
* Clamped-width. 
* Usage: 
* <div data-clampedwidth=".myParent">This long content will force clamped width</div> 
* 
* Author: LV 
*/ 
$('[data-clampedwidth]').each(function() { 
    var elem = $(this); 
    var parentPanel = elem.data('clampedwidth'); 
    var resizeFn = function() { 
     var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth')); 
     elem.css('width', sideBarNavWidth); 
    }; 

    resizeFn(); 
    $(window).resize(resizeFn); 
});

來源

2013-06-21 20:25:23 logan

這是正確的解決方案 – Benj

優雅的解決方案，gets.container在bootstrap3中，讓您能夠擁有貼好的堆疊導航欄 –

您可能需要注意'box-model'聲明 – Eric

貼在他們的網站上的演示是響應式的，它將自己定位在頁面的頂部。移動設備和較小屏幕上的CSS屬性不是可行的選項，因此刪除了功能。

來源

2012-09-21 20:02:34

謝謝您的回答。是的，演示是響應式的，但不是流體網格系統。這就是問題所在。 – Toki

@Toki完全忘記了這個問題，只有在downvote後才注意到你的回覆：/ ...用流體設置測試了bootstrap affix插件，它似乎與最新的bootstrap工作正常，我猜測它是一個問題固定。這是一個演示：http://jsbin.com/urinum/1 –

@ Andres-ilich：您指出的演示包括assets/css/docs.css，它具有針對各種設備的特定剪裁。見下面 ' （at）media（max-width：767px）{ .bs-docs-sidenav.affix { position：static; 寬度：自動; top：0; } ' –

您必須顯式設置邊欄的寬度屬性（或最小寬度）。如果你看看Andres指出的頁面，類「bs-docs-sidenav」的顯式寬度爲228px。

這將覆蓋「.span3」類，並防止邊欄在滾動時調整大小。

如果您刪除了顯式寬度聲明並滾動頁面，則側欄會調整大小，就像您在自己的頁面中看到的問題一樣。

來源

2012-12-31 02:53:48 Mike

但固定寬度不再是流體。 – SPIELER

$(document).ready(function() { 
    setTimeout(function() { 
    $('.sidebar > *').affix({ 
     offset: { 
     top: function() { return $window.width() <= 980 ? 290 : 210 } 
     , bottom: 270 
     } 
    }) 
    }, 100) 
});

在您的網頁是這樣的：

<div class="span2 navper"> 
    <ul class="nav nav-tabs nav-stacked" data-spy="affix"> 
    <li><a href="#">Homepage</a></li> 
    <li><a href="#">Homepage</a></li> 
    <li><a href="#">Homepage</a></li> 
    <li><a href="#">Homepage</a></li> 
    <li><a href="#">Homepage</a></li> 
    </ul> 
</div>

來源

2013-08-08 14:00:37 Alex

帶流體佈局的Bootstrap Affix插件

回答

相關問題