Html 固定 div 内引导列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18857379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fixed div inside bootstrap column
提问by fred
I'm trying to make a two column responsive layout using bootstrap, in the left column I would like to place a menu, and in the right an image gallery. I would like the menu to stay fixed while scrolling through the images on right.
我正在尝试使用引导程序制作两列响应式布局，在左列中我想放置一个菜单，在右侧放置一个图片库。我希望菜单在滚动右侧的图像时保持固定。
The difficulty is that I want the fixed menu to be fluid with the bootstrap layout. So while I don't want it to move up and down when scrolling I do want it to reposition itself when resizing the screen.
困难在于我希望固定菜单与引导程序布局保持流畅。因此，虽然我不希望它在滚动时上下移动，但我确实希望它在调整屏幕大小时重新定位自己。
This website is an example of what I mean: http://www.galeriebertrand.com/artists
这个网站是我的意思的一个例子：http: //www.galeriebertrand.com/artists
I can't seem to figure how it was done on this site, it doesn't seem like the left column has fixed positioning.
我似乎无法弄清楚它是如何在这个网站上完成的，左栏似乎没有固定的定位。
回答by hajpoj
You'll have to use media queries to set the sidebar as position: fixedwhile the width of the screen is wide.
您必须使用媒体查询来设置侧边栏，因为position: fixed屏幕的宽度很宽。
Heres an example: http://jsfiddle.net/hajpoj/Q7A33/1/
这是一个例子：http: //jsfiddle.net/hajpoj/Q7A33/1/
HTML:
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:
CSS：
.sidebar-outer {
position: relative;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
}
}
Basically in this example the columns become stacked at 768px wide (or bootstraps "small" width). If you wanted it to become stacked at a different width like bootstrap's "medium" width (992px) you'll want to change col-sm-4, col-sm-8to col-md-4, col-md-8and change @media (min-width: 768px) to @media (min-width 992px)
基本上在这个例子中，列以 768px 宽（或引导程序“小”宽度）堆叠。如果您希望它以不同的宽度堆叠，例如引导程序的“中等”宽度（992px），您需要更改col-sm-4, col-sm-8为col-md-4, col-md-8并更改@media (min-width: 768px) to @media (min-width 992px)
回答by guydog28
Are you using Bootstrap 2.x or 3? I believe what you are looking for is the affix class. See the below links:
您使用的是 Bootstrap 2.x 还是 3？我相信您正在寻找的是词缀类。请参阅以下链接：
Bootstrap 2.x: http://getbootstrap.com/2.3.2/javascript.html#affix
引导程序 2.x：http: //getbootstrap.com/2.3.2/javascript.html#affix
Bootstrap 3: http://getbootstrap.com/javascript/#affix
