javascript - 引导词缀更改列表元素宽度

我正在使用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之前不会添加词缀。我的问题是，添加词缀后，列表项的宽度发生变化。

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

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

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

最佳答案

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

在添加词缀之前，宽度是从'span3'div继承而来的， parent 是我粘贴的导航。

词缀插入后，该附着的导航从该父对象中删除，这就是为什么它失去宽度的原因。词缀插件基本上将其从DOM中剔除，然后将附着的元素手动放置在顶部。

解决方案是手动给.affix类指定宽度。就我而言，我给了它一个模拟span3父级的宽度。

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

span3的宽度为220px，左侧和右侧均填充15px。所以我上面的CSS起作用了。

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