html – 固定的div里面的bootstrap列

我正在尝试使用引导进行两列响应布局，在左侧列中，我想放置一个菜单，右边是一个图像库。我想在菜单保持固定的同时滚动右边的图像。

困难在于，我希望固定菜单具有引导布局的流畅性。所以当我不想让它上下滚动滚动我确实希望它重新定位自己调整屏幕大小时。

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

我似乎无法确定在这个网站上做了什么，似乎左列没有固定的定位。

解决方法

您将不得不使用媒体查询将侧边栏设置为位置：在屏幕宽度宽的情况下固定。

举个例子：
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;
    }
}

基本上在这个例子中，列变成堆叠在768像素宽(或引导“小”宽)。如果您希望将其以不同的宽度进行堆叠，例如bootstrap的“medium”宽度(992px)，则需要将col-sm-4，col-sm-8更改为col-md-4，col-md-8和将@media(min-width：768px)更改为@media(min-width 992px)

原文地址：https://www.jb51.cc/html/232970.html