Twitter Bootstrap 附加元素宽度从 parent 元素边界滚动

Question

我创建了一个面板元素并在他的 body 中放置了另一个面板元素。比起我给这个 "inside-panel" 一个词缀插件，当我向下滚动页面时我的 "inside-panel" 尺寸变了，看起来不太好看。我写了一个例子并穿上 bootply 来展示它的样子。 bootply example 我尝试用 JS 代码修复宽度：

    var sz = $('.affix').width();
    $(window).scroll(function () {
            $('.affix').width(sz);
    });

但是没有意义。请告诉我如何修复 "inside-panel" 宽度并完美地保持响应。谢谢！

Answer 1

如stated in the docs..

"you must provide CSS for the positioning and width of your affixed content"

当然，这完全取决于您的想法"look nice"。 Here's an example 从你那里分叉 Bootstrap。注意 #myAffix.affix CSS 用于控制面板的位置。

http://bootply.com/RUiDxG0OqI

Answer 2

通过计算 window\element 大小并以适当的百分比设置宽度来解决问题。

Answer 3

查看文档：http://bootstrapdocs.com/v3.2.0/docs/javascript/#affix

您可以侦听 affixed.bs.affix 事件，然后检测 scrollspy parent 的宽度，然后将 scrollspy 设置为匹配此宽度。

这是我的解决方案。

  $("#scroll-spy").on('affixed.bs.affix', function(e) {
    var wrapper = $("#scroll-spy-wrapper");
    var scrollSpy = $("#scroll-spy");

    scrollSpy.width(wrapper.width());
  });

Twitter Bootstrap 附加元素宽度从 parent 元素边界滚动

Twitter Bootstrap affix element width rolling out from parent element borders

css

twitter-bootstrap

affix