javascript - zurb-foundation 部分 -> 导航部分时引入了奇怪的空白

Question

我觉得自己像个白痴。我正在试验 zurb 基础部分。我使用的是最新版本 4.3.1。

我正在关注他们在此处的文档：http: //foundation.zurb.com/docs/components/section.html，并且在导航结果时出现了奇怪的行为。请参阅下面的屏幕截图。我究竟做错了什么？

这是我的代码

<form data-abide action="">
<div class="row">
    <div class="small-24 columns">
        <div class="section-container auto" data-section>
            <section class="section">
                <p class="title" data-section-title><a href="#panel1">Panel 1</a></p>
                <div class="content" data-section-content><p>Content of section 1.</p></div>
            </section>
            <section class="section">
                <p class="title" data-section-title><a href="#panel2">Panel 2</a></p>
                <div class="content" data-section-content><p>Content of section 2.</p></div>
            </section>
            <section class="section">
                <p class="title" data-section-title><a href="#panel3">Panel 3</a></p>
                <div class="content" data-section-content><p>Content of section 3.</p></div>
            </section>
            <section class="section">
                <p class="title" data-section-title><a href="#panel4">Panel 4</a></p>
                <div class="content" data-section-content><p>Content of section 4.</p></div>
            </section>
        </div>
    </div>
</div>
</form> 

Answer 1

啊。我的错。我以为我已经升级了基础，但结果发现我的 ruby​​gems 环境路径有些问题。

在真正升级到 4.3.1 之后，问题就不再存在了。

Answer 2

利用

dysplay:none

对于非活动内容和

dysplay:block

对于活跃的