具有fluid布局的Bootstrap附加插件
具有fluid布局的Bootstrap附加插件
提问于 2012-09-22 02:41:16
如果我想在fluid布局中使用侧边栏的附加插件，但侧边栏的宽度总是在附加时发生变化，响应式设计也不起作用。
在Bootstrap文档中，附加插件没有与fluid布局一起使用。也许是因为他们有同样的问题。
有谁知道怎么让它工作吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-06-22 04:25:23
要让affix与fluid 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);
});Stack Overflow用户
发布于 2012-09-22 04:02:34
他们网站上贴上的演示是响应式的，它将自己定位在页面的顶部。移动设备和较小屏幕上的position:fixed CSS属性不是一个可行的选项，因此该功能将被删除。
Stack Overflow用户
发布于 2012-12-31 10:53:48
您必须显式设置侧边栏的width属性(或min-width)。如果您查看Andres指向的页面，"bs-docs-sidenav“类的显式宽度为228px。
这将覆盖".span3“类，并防止侧边栏在您滚动时调整大小。
如果删除显式宽度声明并滚动页面，侧边栏调整大小就像您在自己页面中看到的问题一样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12536354
复制相关文章
相似问题