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

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

这是我滚动300px并加贴后的截图。你可以看到由于某种原因宽度减小。

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

Answer 1

经过一番研究，我发现了问题所在。

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

2. 在加贴后，将附加的导航从该父级移除，这就是为什么它会丢失它的宽度。 affix插件基本上将它从DOM中删除，并将附加元素手动放在顶部。

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

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

span3的宽度为220px，左右两侧有15px填充。所以我把上面的CSS搞定了。

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