Question

任何人都可以帮我实现使用Bootstrap v3 RC1滚动页面时保持可见的侧面板吗？

这是我的代码Bootply。

我的问题是，当我向下滚动页面时，面板会缩小，我希望它在页面顶部时保持大小。如果我为词缀（.affix{width:10%}）编写样式并设置样式，我可以设置宽度。但是，如果我这样做，那么我将必须为面板设置确切的大小。

这是正确的方法吗？

Answer 1

affix插件根据滚动位置（和偏移量）为元素设置不同的类。在偏移之前，此类将为affix-top，在affix-offset-top和affix-offset-bottom之间，此类将为affix。由affix-top的css定义的位置将是静态的（默认情况下，请参阅：http://www.w3schools.com/cssref/pr_class_position.asp），而affix类的位置设置为固定。

当一个元素有位置时：绝对它的宽度最大为它的父元素的宽度。因此，在您的情况下，您的面板获得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));
})

Answer 2

在class="panel"的Bootstraps CSS中，它将自动应用

.panel {
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

尝试将width:270px添加到.panel CSS。

之后看起来会是这样的

.panel {
    width: 270px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

希望这可以解决您的问题。

Bootstrap 3RC1 +侧面板+附件

2 个答案: