4

谁能帮我实现一个在使用 Bootstrap v3 RC1 滚动页面时保持可见的横向面板？

这是我的代码Bootply。

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

这是正确的方法吗？

4

2 回答 2

2

词缀插件根据滚动位置（和偏移）为您的元素设置不同的类。在这个类的偏移量之前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?）。此类的宽度将为 25% (3/12*100) 父级 .container div。.container 的（最大）宽度取决于屏幕/视口的宽度。

带有 position:fixed 的词缀类没有父容器。所以这个元素的 100% 宽度将是视口的 100% 减去元素的左侧位置（可用空间的 100%）。

更改视口时，.container 的宽度在网格边界之间是固定的（参见：http ://getbootstrap.com/css/#overview-container ）。因此，您的词缀顶部的大小将在此边界之间固定。始终为 .container 的 25%。将 .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));
})
于 2013-09-23T18:40:42.853 回答
0

在 Bootstraps CSS 中class="panel"它会自动应用

.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);
}

尝试将 a 添加width:270px到.panelCSS 中。

所以之后会是这个样子

.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);
}

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

于 2013-08-08T06:55:51.400 回答