Bootstrap 3.0 词缀

Question

我想使用 Bootstrap 3.0 和 affix 将右侧的 col 固定到窗口顶部（滚动时）。

这是元素的html：

<div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477">

这是css：

.right-hand-bar.affix {
    width: 390px;
    position: fixed;
    top: 0px;
    right: 0px;
    margin-top: 110px;
}

在示例here 中，您会看到发生了一些奇怪的事情。

• 固定的 .right-hand-bar（流行的博客文章等）会跳到屏幕的右侧（由于应用了固定位置）。我真的不想搞乱正确的定位，因为网站是响应式的。
• 固定栏跳出主容器。
• 我不得不为固定元素添加一个宽度，我不想这样做（因为它是响应式的）。
• 我还希望它在固定元素的底部碰到页脚顶部（或与页脚的偏移值）时停止滚动页面。

任何人都可以帮助解决这些问题。

提前致谢！

Answer 1

包装.right-hand-bar.affix 样式的媒体查询，因此它们仅适用于桌面版本。无论如何，您都不希望它固定在小屏幕上。

然后将position: relative; 添加到.row 的样式中，.right-hand-bar 将相对于该容器而不是整个页面进行附加。