Bootstrap Affix 更改列表项宽度

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

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

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

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

经过一番研究，我明白了问题所在。

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

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

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

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

span3 宽度为 220px，左右各有 15px 内边距。所以我上面的 CSS 已经成功了。

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