固定div在bootstrap列中

Question

我试图让使用自举一个两列响应式布局,在左栏我想下一个菜单,在右侧的图片库.我希望菜单在滚动右边的图像时保持固定.

困难在于我希望固定菜单具有引导布局的流畅性.所以,当滚动时,我不希望它向上和向下移动我不希望它调整画面时祭出.

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

我似乎无法弄清楚它是如何在此网站上完成的,它似乎并不像左边的列有固定的定位.

Answer 1

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宽(或bootstraps"小"宽度)堆叠.如果你想让它在不同的宽度一样引导的"中间"宽度成为堆叠(992px),你会想改变col-sm-4, col-sm-8,以col-md-4, col-md-8与变化@media (min-width: 768px) to @media (min-width 992px)

Answer 2

你使用的是Bootstrap 2.x还是3？我相信你要找的是词缀类.请参阅以下链接:

Bootstrap 2.x:http://getbootstrap.com/2.3.2/javascript.html#affix

Bootstrap 3:http://getbootstrap.com/javascript/#affix