具有流畅布局的Bootstrap Affix插件

Question

如果我想在流体布局中使用侧边栏的附加插件,但侧边栏的宽度在贴上时总是会改变,而响应式设计也不起作用.

在Bootstrap文档中,affix插件不与流体布局一起使用.也许是因为他们有同样的问题.

有谁知道如何使它工作？

Answer 1

要使用流畅的span3侧边栏进行粘贴,您需要添加一些javascript来限制宽度并管理调整大小.

我刚刚编写了一个小的javascript函数来完成这项工作.

从bootstrap中查看此错误.

/*
* 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);
});