css - 如何在 div 中一起使用基础类 .contain-to-grid 和 .fixed？

Question

我来自 Ed 的回答 ( https://stackoverflow.com/a/14141798 )，关于使用基础类以获得包含网格的固定导航。每次尝试将这些类与 class="contain-to-grid fixed"一起使用，如 Foundation 文档中所述 "Positioning the Bar"不管用。 .contain-to-grid 和 .fixed 只有在一个接一个的 div 元素中单独使用时才有效，请与我下面的代码进行比较。与文档/行为相比，这是已知问题还是我的标记有任何问题？

这是来自 http://frickeln.jensfreyer.de/blog/ 的代码

编辑:我首先提交了我的标记的(无效)版本；该版本也在线(并且错误地显示为未修复)。但我更新到当前，为 .contain-to-grid 和 .fixed 分配了单独的类(class)。作为我的问题的基础:

<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>

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

在@r8n5n 的帮助下，我想强调我遇到的问题:当我尝试时，标记的行为是不同的(尽管从 Foundation，“Positioning the Bar”，cp. 上面描述的，但没有像预期的那样工作)将类合并到一个 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

您需要使用固定类包装导航。将固定类移动到 contain-to-grid div。即

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

这将使导航栏“有粘性”。