7

我正在使用 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 像素并开始使用 affix 后的屏幕截图。您可以看到由于某种原因宽度减小了。

词缀后

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

4

1 回答 1

8

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

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

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

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

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

span3 的宽度为 220 像素，左右填充 15 像素。所以我把上面的 CSS 工作了。

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

于 2013-06-26T01:16:02.873 回答