如果我想在流畅的布局中使用侧边栏的附加插件,但侧边栏的宽度总是在附加时发生变化,并且响应式设计也不起作用。
在 Bootstrap 文档中,词缀插件不与流体布局一起使用。也许是因为他们有同样的问题。
有人知道如何使它工作吗?
如果我想在流畅的布局中使用侧边栏的附加插件,但侧边栏的宽度总是在附加时发生变化,并且响应式设计也不起作用。
在 Bootstrap 文档中,词缀插件不与流体布局一起使用。也许是因为他们有同样的问题。
有人知道如何使它工作吗?
为使 affix 与流体span3
侧边栏一起使用,您需要添加一些 javascript 来限制宽度并管理调整大小。
我只是写了一个小 javascript 函数来完成这项工作。
从引导程序中查看此错误。
/*
* 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);
});
他们网站上的附加演示是响应式的,它按预期将自己定位在页面顶部。移动设备和较小屏幕上的position:fixed
CSS 属性不是一个可行的选项,因此功能被删除。
您必须为侧边栏显式设置宽度属性(或最小宽度)。如果您查看 Andres 指向的页面,“bs-docs-sidenav”类的显式宽度为 228px。
这会覆盖“.span3”类并防止侧边栏在滚动时调整大小。
如果您删除该显式宽度声明并滚动页面,则侧边栏会调整大小,就像您在自己的页面中看到的问题一样。
$(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>