引导固定更改列表项宽度

Question

我正在使用Twitter Bootstrap的affix功能将左侧列固定，该列当前包含一个导航列表。

<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>

根据我的理解，这意味着在滚动了300像素后才会启用固定。 我的问题是，在固定启用后，我的列表项宽度发生了变化。

这是固定启用之前，我悬停在列表项上的截图。 可以根据悬停背景看出，宽度是正确的。

这是我滚动了300像素并启用了固定后的截图。 你可以看到由于某种原因宽度减小了。

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

- Sajan Parikh

---

看起来你使用得很正确。你能发布一下你的其他CSS吗？ - BjornJohnson

@BjornJohnson，除了使用 Bootswatch 主题的默认 Bootstrap 外，没有其他 CSS。虽然，我解决了问题并回答了自己的问题。谢谢。 - Sajan Parikh

Answer 1

经过一些研究，我已经找到了问题所在。

1. 在辅助元素生效之前，宽度是从父元素“my affixed nav”的'span3' div继承来的。

2. 当辅助元素生效后，“my affixed nav”从其父元素中移除，这就是为什么它会失去宽度的原因。 辅助插件基本上从DOM中删除它，并手动将固定元素放在顶部。

解决方法是手动给'.affix'类一个宽度。 在我的情况下，我给它一个模拟span3父元素的宽度。

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

span3宽度为220px，左右两侧各有15像素的填充。所以我的CSS代码已经起作用了。 如果你有多个固定位置元素，你需要正确选择并应用不同的宽度。

- Sajan Parikh

---

很棒。顺便说一下，我建议在该元素中添加另一个类来设置宽度，而不是为 .affix 类添加宽度声明，例如 .affix.whatever {width:190px}（如果您想在其他地方使用 Affix 会怎样？）但是你比我更了解你的项目。 - BjornJohnson

但是，这并不是响应式的，因为你正在设置像素值...尝试调整窗口大小。 - janscas