html - Zurb Foundation 4 顶栏固定/粘性高度问题

Question

我正在为网站使用 Zurb Foundation 4，我已经使用过它，但我从未尝试过粘性或固定顶部栏类。

问题是，当我为我的导航包装器设置粘性或固定类时，当在浏览器导航栏中呈现时，导航栏的高度变成了两倍!(我使用容器是因为，从文档“要使顶部栏在滚动时保持固定，将其包装在 div class="fixed" 中”)

任何人都知道为什么顶栏会随着该类改变其高度？我真的找不到解决办法!

代码如下:

<div class="contain-to-grid fixed"> 
      <nav class="top-bar">
         <ul class="title-area">
            <li class="name">
               <h1><a href="#">Title</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
         </ul>
       <section class="top-bar-section">     
         <ul class="right">
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
               <li><a href="#">Link 3</a></li>
               <li><a href="#">Link 4</a></li>
         </ul>
         </section>
      </nav>
   </div>

Answer 1

找到解决方案:

问题似乎是带有 .contain-to-grid 类的包装器 div。如果我删除它，我可以拥有一个完美工作的粘性/固定顶部栏。

当我添加该类时，我的顶部栏变粗了。在默认情况下，我发现:

.contain-to-grid { width: 100%; background: #111111; }
.contain-to-grid .top-bar { margin-bottom: 1.875em; }

所以我做了一个覆盖

.contain-to-grid .top-bar { margin-bottom: 0 !important; }

现在我的顶栏变粘了，适应网格，又变薄了!