twitter-bootstrap – Bootstrap 3RC1侧面板附件

affix插件根据滚动位置(和偏移量)为元素设置不同的类.在偏移之前,这个类将是affix-top,在affix-offset-top和affix-offset-bottom之间,这个类将是附加的.由css为affix-top定义的位置将是静态的(默认,也见： http://www.w3schools.com/cssref/pr_class_position.asp),而词缀类的位置设置为fixed.

当元素具有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));
})