如何使用基础类.container语言 - to-grid和.fixed一起在一个div

Question

我来自Ed的回答(https://stackoverflow.com/a/14141798)，关于使用基础类来获得包含到网格的固定导航。每次尝试将这些类与class=" container -to-grid fixed"一起使用，就像基金会文档"Positioning the Bar"中描述的那样，都无法工作。container -to-grid和。fixed只有在一个接一个div-elements中单独使用时才能工作，请与下面的代码进行比较。这是一个已知的问题vs.文档/行为或有什么错误与我的标记?

下面是来自http://frickeln.jensfreyer.de/blog/

的代码

Edit:我已经先提交了一个(不工作的)标记版本;那个版本也在网上发布了(而且似乎错误地没有修复)。但我更新到当前与分离的类分配。包含到网格和。固定。作为我问题的基础:

<header>
  <div class="row">
    <div class="large-12 columns">               
      <div class="contain-to-grid">
        <div class="fixed">           
          <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
              <li class="name">
                <h1> 
                  <txp:link_to_home> 
                    <txp:site_name /> 
                  </txp:link_to_home>            
                </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 class="devider"></li>
<!-- Navigation, Menü 1 -->
                <li><txp:section link="1" title="1" name="blog" /></li>                                                                       
                <li class="divider"></li>
<!-- Navigation, Menü 2 -->
(...)
              </ul>
            </section>
          </nav>
        </div> 
      </div>                
    </div>
  </div>
</header>

Edit:上面的标记显示了格式是如何工作的:导航栏适合网格，并保持固定在网站的顶部。

我想强调我的问题，经过@r8n5n的一些帮助:标记的行为是不同的(不像预期的那样工作，虽然从基础，"定位栏"，上面的描述)，当我试图将类组合在一个div:

<header>
  <div class="row">
    <div class="large-12 columns">               
      <div class="contain-to-grid"> <!-- <= it's WORKING with two div elements -->
        <div class="fixed">           
          <nav class="top-bar" data-topbar role="navigation">
(...)
<header>
  <div class="row">
    <div class="large-12 columns">               
      <div class="contain-to-grid fixed"> <!-- <= and it's NOT WORKING with two classes together -->          
        <nav class="top-bar" data-topbar role="navigation">
(...)

我使用的是Foundation 5.5.2和Textpattern 4.5.7.

Answer 1

你需要用固定的类来包装导航。将固定类移动到container -to-griddiv，即

<div class="contain-to-grid fixed"> 
   <nav class="top-bar" data-topbar role="navigation">
    ...
   </nav>
</div>

这将使导航栏具有"粘性"

Answer 2

看起来文档上的标记是正确的- http://codepen.io/rafibomb/pen/WQGaep?editors=110

<div class="contain-to-grid fixed"> 
  <nav class="top-bar" data-topbar role="navigation">

什么行为是你期待却没有看到的?也许这是一个混乱的包含网格做什么?