任何人都可以帮助我实现在使用 Bootstrap v3 RC1 滚动页面时保持可见的横向面板吗？
这是我的代码 Bootply 。
我的问题是，当我向下滚动页面时，面板会缩小，我希望它在页面位于顶部时保持大小。如果我为词缀( .affix{width:10%} )编写样式和样式，我可以设置宽度。但是，如果我这样做，那么我将不得不输入面板的确切尺寸。
这是正确的方法吗？
最佳答案
词缀插件根据滚动位置(和偏移量)为您的元素设置不同的类。在偏移之前这个类是 affix-top ，在affix-offset-top 和affix-offset-bottom 之间这个类是 affix 。由 css 为 affix-top 定义的位置将是静态的(默认，另见: http://www.w3schools.com/cssref/pr_class_position.asp )而 affix 类的位置设置为固定。
当一个元素有 position:absolute 时，它的宽度最大是它的父元素的宽度。因此，在您的情况下，您的面板获得 col-lg-3 的 100% 宽度(由于 box-sizing: border-box，请参阅 Why did Bootstrap 3 switch to box-sizing: border-box? )。这个类的宽度将是父 .container div 的 25% (3/12*100)。 .container 的(最大)宽度取决于屏幕/视口(viewport)的宽度。
带有 position:fixed 的词缀类没有父容器。因此，此元素的 100% 宽度将是视口(viewport)的 100% 减去元素的左侧位置(可用空间的 100%)。
更改视口(viewport)时， .container 的宽度在网格边界之间是固定的(请参阅: http://getbootstrap.com/css/#overview-container )。因此，您的词缀顶部的大小将在此边界之间固定。始终是 .container 的 25%。将 .affix 类也设置为 25%，它的大小会随流体变化。因为 25% 的视口(viewport)(减去左边)大多不等于 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));
})
关于twitter-bootstrap - Bootstrap 3RC1 + 侧面板 + 词缀，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18114351/