Bootstrap 3RC1 + 侧边栏 + 固定导航

4

有谁能帮我实现一个使用Bootstrap v3 RC1的侧面面板,当滚动页面时保持可见?

这是我的代码Bootply

我的问题是当我向下滚动页面时,面板会缩小,而我想让它在页面顶部时保持大小不变。如果我写并设置affix(.affix{width:10%}),那么我可以设置宽度。然而,如果我这样做,那么我必须为面板设置精确的尺寸。

这是正确的方法吗?

2个回答

2
affix插件根据滚动位置(和偏移量)为元素设置不同的类。在偏移量之前,此类将是affix-top,在affix-offset-topaffix-offset-bottom之间,此类将是affix。对于affix-top,CSS定义的位置将是静态的(默认值,另请参见:http://www.w3schools.com/cssref/pr_class_position.asp),而affix类的位置设置为固定。
当元素具有position:absolute时,其宽度最大为其父级的宽度。因此,在您的情况下,由于box-sizing:border-box(请参见Why did Bootstrap 3 switch to box-sizing: border-box?),面板的宽度为col-lg-3的100%宽度。此类的宽度将是父级.container div的25%(3/12*100)。.container的(最大)宽度取决于屏幕/视口的宽度。
具有position:fixed的affix类没有父级容器。因此,该元素的100%宽度将是视口减去元素左侧位置的100%可用空间。
更改视口时,.container的宽度在网格边界之间固定(请参见:http://getbootstrap.com/css/#overview-container)。因此,您的affix-top的大小将在这些边界之间固定。始终为.container的25%。将.affix类设置为25%,其大小将变得流畅。由于视口的25%(减去左侧)大多数情况下不等于容器的25%,因此使用.class .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 仍然有点太宽了!我该如何解决这个问题?您会使用什么代码?谢谢。 - John Smith
1
使用以下代码来实现滚动时的效果:$(document).scroll(function(){ $('.panel.affix').width(((($('.container').width()+30)*0.75)-30)); }),其中0.75 = 9 / 12。 - Bass Jobsen
谢谢!也许你可以帮我解决这个问题:http://stackoverflow.com/questions/21782325/hide-text-that-is-scrolled-behind-input - John Smith

0
在 Bootstrap 的 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);
}

尝试在 .panel 的 CSS 中添加 width:270px

这样它看起来就像这样

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

希望这能解决你的问题。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接