有谁能帮我实现一个使用Bootstrap v3 RC1的侧面面板,当滚动页面时保持可见?
这是我的代码Bootply。
我的问题是当我向下滚动页面时,面板会缩小,而我想让它在页面顶部时保持大小不变。如果我写并设置affix(.affix{width:10%}
),那么我可以设置宽度。然而,如果我这样做,那么我必须为面板设置精确的尺寸。
这是正确的方法吗?
有谁能帮我实现一个使用Bootstrap v3 RC1的侧面面板,当滚动页面时保持可见?
这是我的代码Bootply。
我的问题是当我向下滚动页面时,面板会缩小,而我想让它在页面顶部时保持大小不变。如果我写并设置affix(.affix{width:10%}
),那么我可以设置宽度。然而,如果我这样做,那么我必须为面板设置精确的尺寸。
这是正确的方法吗?
affix-top
,在affix-offset-top
和affix-offset-bottom
之间,此类将是affix
。对于affix-top
,CSS定义的位置将是静态的(默认值,另请参见:http://www.w3schools.com/cssref/pr_class_position.asp),而affix
类的位置设置为固定。/* 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; } }
$(document).scroll(function(){
$('.panel.affix').width(((($('.container').width()+30)/4)-30));
})
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);
}
希望这能解决你的问题。
.container
的宽度除以4
,因为应该固定的面板是col-lg-3
。现在我尝试使用以下代码来修复col-lg-9
:$('.col-lg-9').width((((($('.container').width()+30)/4) * 3)-30));
但是你可以想象,这给了我错误的尺寸!col-lg-9
仍然有点太宽了!我该如何解决这个问题?您会使用什么代码?谢谢。 - John Smith