我的问题是,当我向下滚动页面时,面板会缩小,我希望它在页面顶部时保持大小.如果我为词缀(.affix {width：10％})编写和样式,我可以设置宽度.但是,如果我这样做,那么我将不得不为面板设置确切的大小.
这是正确的方法吗？
解决方法
当元素具有position：absolute时,它的宽度最大为其父级的宽度.因此,在您的情况下,您的面板将获得col-lg-3的100％宽度(由于框大小调整：border-Box,请参阅Why did Bootstrap 3 switch to box-sizing: border-box?).此类的宽度为25％(3/12 * 100)父.container div. .container的(max-)宽度取决于屏幕/视口的宽度.
具有position：fixed的词缀类没有父容器.因此,此元素的100％宽度将是视口的100％减去元素的左侧位置(可用空间的100％).
更改视口时,.container的宽度固定在网格的边界之间(请参阅：http://getbootstrap.com/css/#overview-container).所以你的词缀顶部的大小将固定在这个边界之间.总是25％的.container.将.affix类也设置为25％,它的大小会变化.原因25％的视口(减去左侧)大多不等于容器的25％,您的附加元素将具有与类.affix不同的宽度.
由于上述原因,固定元件的宽度大多固定为像素值.有关示例,请参阅http://getbootstrap.com/上的文档.
根据屏幕宽度改变侧面板宽度的最佳方法(使其响应)将是宽度(以像素为单位)与媒体查询相结合.
例：
/* Extra small devices (phones,up to 480px) */
/* No media query there is no affix */
/* Small devices (tablets,768px and up) */
@media (min-width: 768px) { #side-panel { width: 152px; } }
/* Medium devices (desktops,992px and up) */
@media (min-width: 992px) { #side-panel { width: 208px; } }
/* Large devices (large desktops,1200px and up) */
@media (min-width: 1200px) { #side-panel { width: 270px; } }
请参阅：http://bootply.com/82661(注意我采用Bootstrap 3.0.0的代码.)
替代使用jQuery设置宽度：
这表明宽度取决于.container,但更喜欢上面的css解决方案.
$(document).scroll(function(){
$('.panel.affix').width(((($('.container').width()+30)/4)-30));
})