2

我想使用 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;
}

在此处的示例中，您将看到发生了一些奇怪的事情。

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

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

提前致谢！

4

1 回答 1

2

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

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

于 2013-10-02T20:06:13.487 回答