3

我来自 Ed 的回答（https://stackoverflow.com/a/14141798）关于使用基础类以获得包含网格的固定导航。如 Foundation 文档“定位条形图”中所述，每次尝试将这些类与 class="contain-to-grid fixed" 一起使用均无效。.contain-to-grid 和 .fixed 仅在一个又一个 div 元素中单独使用时才有效，请与下面的代码进行比较。这是一个已知问题与文档/行为还是我的标记有什么问题？

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

编辑：我首先提交了一个（不工作的）我的标记版本；该版本也在线（并且错误地出现未修复）。但是我用 .contain-to-grid 和 .fixed 的单独类分配更新到当前。作为我的问题的基础：

<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 的帮助下，我想强调我遇到的问题：当我尝试结合一个 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。

4

2 回答 2

2

您需要使用固定类包装导航。将固定类移动到包含网格 div。IE

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

这将使导航栏“粘性”。

于 2015-09-16T10:11:01.683 回答
0

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

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

你期望什么行为你没有看到？也许对包含到网格的内容感到困惑？

于 2015-09-24T18:55:40.450 回答