3

グリッドに含まれる固定ナビゲーションを取得するための基礎クラスの使用に関する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 の個別のクラス割り当てを使用して現在の状態に更新しました。私の質問の根拠として：

<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 の助けを借りて、私が抱えている問題を強調したいと思います。 1 つの 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

ナビゲーションを固定クラスでラップする必要があります。固定クラスを、contain-to-grid div に移動します。すなわち

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

これにより、ナビゲーション バーが「固定」されます。

于 2015-09-16T10:11:01.683 に答える