1

ウェブサイトをレスポンシブにするために、zurb Foundation を使用しています。アイデアは、ヘッダーが大きな画面で次のように表示されるようにすることです (実際に表示されます)。

####### |------ Search ----------| %%%%%%%%%%%

そして、これは小さな画面では(そうではありません):

###### %%%%%%%%%%
|---- Search ---|

2 つの問題があります。1つ目は、モバイルが実際に次のように見えることです。

###### 
|---- Search ---|
       %%%%%%%%%%

2 つ目は、検索バーがクリックできないことです。z-index を変更して、行に非表示のコンテンツを表示しようとしましたが、役に立ちませんでした。レイアウトについては、プッシュ アンド プル モバイルを試しましたが、状況はさらに悪化しました。レイアウトのコードは次のとおりです。

興味深いことに、検索ボタンは表示されるべきではありませんが、表示され、クリック可能であり、検索バーと同じ形式になっています。

私がやろうとしていることは、zurb ファンデーションで可能ですか? 私は本当に、2つの異なる検索フォームを持つことを避けたいと思っています...


参考までに、zurb Foundation の scss 変数を次のように変更しました。

$totalColumns: 16;
$mobileTotalColumns: 8;
$columnGutter: 0;

次のようなヘッダーがあります。

<div class="row">
   <div class="three mobile-three columns"></div>
   <div id="search" class="eight mobile-eight columns">
      <div class="row">
         <div class="thirteen mobile-eight columns">
            <!-- text input for search -->
         </div>
         <div class="hide-on-phones hide-on-tablets three columns">
            <!-- Submit button for search -->
         </div>
      </div>            
   </div>
   <nav class="five mobile-five columns">
      <ul class="right">
         <li><%= link_to 'Teams', '#' %></li>
         <li><%= link_to 'Records', '#' %></li>
         <li><%= link_to 'Settings', '#' %></li>
      </ul>
   </nav>
</div>

ヒントや提案をお寄せいただきありがとうございます。

4

1 に答える 1

6

目的の動作をデモするプロジェクトを git ハブに作成しました。

https://github.com/EdCharbeneau/foundation-ordering-stacking-help

やりたいことを実現するには、モバイル列ソースの順序付け、およびメディア クエリを組み合わせて使用​​する必要があります。

注: この例では、Ruby/SASS バージョンではなく、HTML/CSS バージョンを使用しています。しかし、それはコードの動作には影響しません。

于 2012-12-01T17:06:10.627 に答える