Bootstrap 3RC1 + 侧面板 + Affix答案

【问题标题】：Bootstrap 3RC1 + Side Panel + AffixBootstrap 3RC1 + 侧面板 + Affix
【发布时间】：2013-08-09 11:26:38
【问题描述】：

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

这是我的代码Bootply。

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

这是正确的方法吗？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

词缀插件根据滚动位置（和偏移量）为您的元素设置不同的类。在偏移量之前，此类将是 affix-top，在 affix-offset-top 和 affix-offset-bottom 之间，此类将是 affix。 affix-top 由 css 定义的位置将是静态的（默认，另见：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));
})

【讨论】：

在本例中，我假设您将.container 宽度除以4，因为应该修复的面板是col-lg-3。现在我尝试使用以下代码修复col-lg-9：$('.col-lg-9').width((((($('.container').width()+30)/4) * 3)-30));，但你怎么能想象这给了我不正确的尺寸！ col-lg-9 有点宽！我怎样才能解决这个问题？你会使用什么代码？谢谢
在这种情况下使用 $(document).scroll(function(){ $('.panel.affix').width(((($('.container').width()+30)*0.75)-30)); }) 其中 0.75 = 9 / 12
谢谢！也许你可以帮我解决这个问题：stackoverflow.com/questions/21782325/…

【解决方案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);
}

希望这能解决您的问题。

【讨论】：