带流体布局的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插件

回答

相关问题