Question

我正在尝试使用bootstrap制作两列响应式布局，在左栏中我想放置一个菜单，右边是一个图库。我希望菜单在滚动右边的图像时保持固定。

困难在于我希望固定菜单在引导程序布局中流畅。因此，虽然我不希望它在滚动时上下移动，但我希望它在调整屏幕大小时重新定位。

这个网站就是我的意思的一个例子： 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“小”宽度）堆叠。如果您希望它以不同的宽度堆叠，例如bootstrap的“中等”宽度（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

固定div在bootstrap列中

2 个答案: