修复了引导列内的 div [关闭]

Posted 2023-02-16

【中文标题】修复了引导列内的 div [关闭]

【英文标题】：fixed div inside bootstrap column [closed]

【发布时间】：2013-09-22 08:04:01

【问题描述】：

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

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

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

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

【问题讨论】：

让left div position=fixed，并改变right div的内容。大多数情况下，您显示的页面似乎是单页应用程序。但作为建议，您应该尝试使用角度指令并将其放入单页应用程序中。左 div= 固定，右 div= 相对

【参考方案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;
    

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

【参考方案2】：

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

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

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

【讨论】：

我正在使用bootstrap 3。非常感谢，这似乎是我正在寻找的，我会试试看！

很好，没问题。如果这回答了您的问题，请不要忘记打勾！

哦。我完全忘记了这门课......但是如果你想在没有js的情况下手动做......然后试试我的解决方案:)