引导词缀行高与导航不准确答案

【问题标题】：bootstrap affix line-height inaccurate with navigation引导词缀行高与导航不准确
【发布时间】：2012-10-26 09:16:46
【问题描述】：

我正在使用bootstrap affix js plugin，效果很好。我遇到的问题是，当我将正文更改为使用自定义字体 (Google: Lato) 时，它会完全关闭锚点位置。

词缀链接导致页面位置不佳，滚动时页面不再与词缀侧边栏对齐。它总是偏离 100 像素左右。

即。

body { font-family: 'Lato', helvetica, arial, sans-serif; color: #221e1e; font-weight: 300; line-height: 150%; }

我确信还有另一种方法可以补偿新的较小字体或行高，但我还没有找到。

如果我将整个身体的 line-height 提高到 300，它可以正常工作，只是间距太可怕了。因此，我尝试仅在包含锚点的标题上调整行高。

h2 .mw-headline { line-height: 330%; }

它几乎可以工作，除了它在第一个链接上仍然关闭并且感觉有点骇人听闻。我确信有一个适当的方法来处理这个问题，我只是不确定那是什么。

【问题讨论】：

【解决方案1】：

如果您使用 less 或 sass，您可能可以使用 Bootstrap 的自定义变量来解决此问题。

你的情况是这样的：

@baseFontFamily: 'Lato', helvetica, arial, sans-serif;
@textColor: #221e1e;
@baseLineHeight: 20px;

【讨论】：