【问题标题】：Bootstrap affix not working with data attributes in aurelia引导词缀不适用于 aurelia 中的数据属性
【发布时间】：2017-01-09 15:22:54
【问题描述】：

这似乎是一个非常普遍的问题，因为大约有 10 篇关于 Bootstrap 词缀不起作用的帖子。不幸的是，这些解决方案似乎都不起作用。文档声明使用数据属性将“data-spy”属性简单地应用于任何元素，然后将 .affix .affix-top 和 .affix-bottom 添加到 css。这样做，实际上什么也没有发生。网页作为词缀甚至不存在。我知道 CSS 文件在那里，因为我刚刚将 .bg-pink 添加到其中一个 div 并且它变成了粉红色。如果我将“词缀”放在我的类中的一个 div 中，它将锁定该元素，但它会完全破坏任何容器格式。 aurelia 可能在后台用 js 做任何有趣的事情吗？我可以让它自己工作，但不能在 aurelia 应用程序中工作。

我关注的文档：http://getbootstrap.com/javascript/#affix

以下是我希望它工作的方式，但显然 HTML 不喜欢它。

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <!-- selection menu bar -->
            <div class="well well-lg"  data-spy="affix" data-offset-top="60" data-offset-bottom="200">
               <!-- My content that should be locked -->
               <label>Program</label>
            </div>
       </div>
    </div> 
<div>

CSS

.affix {
  top: 1;
  width: 25%;
}

.affix-top {
  width: 25%;
}

.affix-bottom {
  width: 25%;
  position: fixed;
}

【问题讨论】：

您能否提供生成的“混乱”页面的屏幕截图？我的猜测是，由于元素现在的位置是固定的，因此它超出了它的容器的正常流程（用于帮助它定义它的大小）。因此，当位置固定（词缀）时，您可能必须非常具体地在 css 中调整大小和放置。
此时我认为我有两个不同的问题。左边的“程序”井是 col-md-2。 imgur.com/a/H7MrQ。右边部分是另一个 col-md-10（我没有在上面的代码中添加它）。问题 1) 在应用程序中的元素上添加“data-spy="affix"” 没有任何作用，它不会改变显示中的任何内容。 bootstrap.js 正在加载（控制台中显示 $.fn.affix）。 CSS 表也在加载。如果我添加
它似乎可以很好地粘贴 col-md-2 但会产生问题 2)，即显示问题 (imgur.com/a/tda57)。

标签： html css twitter-bootstrap-3 aurelia

【解决方案1】：

它最终成为 Aurelia（任何带有模板引擎的 SPA）处理 jQuery 的方式的问题。有人向我解释说，

“通常，当您加载插件时，它会等待文档加载，然后使用选择器查找所有标签。没有 Aurelia 中的 document.onload，因为它是基于模板的”

加入页面的 attach() 方法似乎可以让词缀开始在页面上工作。此代码取自 bootstrap.js 文件（3.3.6 的最底层。

  $('[data-spy="affix"]').each(function () {
  var $spy = $(this)
  var data = $spy.data()

  data.offset = data.offset || {}

  if (data.offsetBottom != null) data.offset.bottom = data.offsetBottom
  if (data.offsetTop    != null) data.offset.top    = data.offsetTop

  $spy.affix(data);
})

【讨论】：