20

我正在尝试使用引导程序制作两列响应式布局，在左列中我想放置一个菜单，在右列中放置一个图片库。我希望菜单在滚动右侧图像时保持固定。

困难在于我希望固定菜单与引导布局保持一致。因此，虽然我不希望它在滚动时上下移动，但我确实希望它在调整屏幕大小时重新定位。

这个网站是我的意思的一个例子： http ://www.galeriebertrand.com/artists

我似乎无法弄清楚它是如何在这个网站上完成的，左栏似乎没有固定的定位。

4

2 回答 2

17

您必须使用媒体查询将侧边栏设置为position: fixed屏幕宽度较宽。

这是一个例子：http: //jsfiddle.net/hajpoj/Q7A33/1/

HTML：

<div class="row">
    <div class="col-sm-4 sidebar-outer">
        <div class="sidebar">/* fixed sidebar */
        </div>
    </div>
    <div class="col-sm-8">
        <div class="content"> /*fluid content */
        </div>
    </div>
</div>

CSS：

.sidebar-outer {
    position: relative;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
    }
}

基本上在这个例子中，列堆叠成 768px 宽（或引导“小”宽度）。如果您希望它以不同的宽度堆叠，例如引导程序的“中等”宽度（992px），您需要更改col-sm-4, col-sm-8为col-md-4, col-md-8@media (min-width: 768px) to @media (min-width 992px)

于 2013-09-17T19:14:18.100 回答
13

您使用的是 Bootstrap 2.x 还是 3？我相信您正在寻找的是词缀类。请参阅以下链接：

引导 2.x： http: //getbootstrap.com/2.3.2/javascript.html#affix

引导程序 3： http: //getbootstrap.com/javascript/#affix

于 2013-09-18T13:20:26.257 回答