twitter-bootstrap - Bootstrap : anchors and body top margin/padding

Question

我正在使用带有固定在页面主体顶部的全局导航栏的 Bootstrap。

    <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/">MyBrand</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#>Page 1</li>
                        <li><a href="#>Page 2</li>
                        <li><a href="#>Page 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

我在正文顶部添加了一个 40px 的边距，以便页面内容的顶部不会被导航栏覆盖。

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

到那里为止，一切正常。我还使用内部 anchor 来简化页面内的导航，使用 Twitter 与 Bootstrap 文档中的 affix 组件使用的相同机制，使用户能够跳转到页面内的不同部分(参见 http://twitter.github.com/bootstrap/getting-started.html)

<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>

[...]

<section id="section1">
    [...]
    [...]
    [...]
</section
<section id="section2">
    [...]
    [...]
    [...]
</section
<section id="section3">
    [...]
    [...]
    [...]
</section>

我的问题是当用户点击时，浏览器将目标粘贴到屏幕的最顶部，内容在导航栏下消失。我注意到 Twitter 使用了一个技巧，目标为 <section>标签包括“padding-top: 30px;”，最接近的 <h1>包括一个“margin-top:10px；” CSS 指令，以便将文本显示在屏幕顶部下方 40 像素处。

我不能让我在每个部分之间“丢失”40px，我的显示器必须保持紧凑。我的问题是:有没有办法让内部 anchor 不粘在屏幕 View 的最顶部，而是远离屏幕顶部任意长度？

Answer 1

最后，我想出了如何 轻松解决这个问题:

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

section {
    padding-top:40px;
    margin-top:-40px;
}

这意味着在 body 顶部添加了 40px 的边距，在部分顶部添加了 40px 的填充，还添加了负的 40px 边距，以便向上移动它们各自的预期位置，引入不可见边距，当单击 anchor 后，浏览器将显示绘制到一个部分。

希望这有帮助。