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搞定了.

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