Question

我创建了一个面板元素，并在他的体内放置了另一个面板元素。比我对这个＆＃34;内部面板＆＃34;一个词缀插件，当我向下滚动页面我的＆＃34;内部面板＆＃34;改变大小，看起来不太好看。我写了一个例子并用bootply来展示它的样子。 bootply example 我尝试使用JS代码来修复宽度：

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

但没有意义。请告诉我如何解决＆＃34;内部面板＆＃34;宽度和完美仍然保持响应。谢谢！

Answer 1

作为stated in the docs ..

“你必须提供CSS来定位你的贴纸和宽度内容“

当然，这一切都取决于你的想法“看起来不错”。 Here's an example从你的Bootstrap分叉。请注意用于控制面板位置的#myAffix.affix CSS。

http://bootply.com/RUiDxG0OqI

Answer 2

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

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

这是我的解决方法。

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

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

Answer 3

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

Twitter Bootstrap附加元素宽度从父元素边框滚出

3 个答案: