Question

我来自Ed的答案（https://stackoverflow.com/a/14141798）关于基础课程的使用，以获得包含在网格中的固定导航。每次尝试使用这些类与class =＆＃34;包含到网格固定＆＃34;如基金会文档中所述"Positioning the Bar"无效。 .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的一些帮助之后，我想强调一下我的问题：标记的行为是不同的（不按预期工作，虽然从基金会描述，＆＃34;定位栏＆＃34;，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

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

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

你期待你没有看到什么行为？也许这对网格包含什么感到困惑？

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

2 个答案: