javascript - Bootstrap Affix 更改列表项宽度

Question

我正在使用 Twitter Bootstrap 的词缀来附加当前包含导航列表的左栏。

<div class="row">
    <div class="span3">
        <ul class="nav nav-list" data-spy="affix" data-offset-top="300">
            <li class="nav-header">Navigation</li>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
        </ul>
    </div>

根据我的理解，这意味着在滚动 300px 之前词缀不会生效。我的问题是词缀加入后我的列表项的宽度发生了变化。

这是我在词缀开始之前将鼠标悬停在列表项上的屏幕截图。您可以根据悬停背景，宽度是正确的。

这是我滚动 300 像素并添加词缀后的屏幕截图。您可以看到由于某种原因宽度减小了。

我想知道为什么会这样，如何纠正它，以及我是否正确使用词缀。

Answer 1

经过一些研究，我弄清楚了问题所在。

1. 在词缀开始之前，宽度是从“span3”div 继承的，父级是我附加的导航。

2. 词缀启动后，附加的导航将从该父项中移除，这就是它失去宽度的原因。词缀插件基本上将其从 DOM 中剥离出来，然后手动将附加元素放在顶部。

解决方案是手动给 .affix 类一个宽度。在我的例子中，我给了它一个模拟 span3 父级的宽度。

.affix {
    position: fixed;
    top: 20px;
    width: 190px;
}

span3 宽度为 220px，左右各有 15px padding。所以我放置上面的 CSS 已经奏效了。

如果您有多个词缀，则必须正确选择并应用不同的宽度。