2012-08-25 10 views
7

Sorun şu ki, masaüstündeyken önce menüye ve sonra en sağ köşedeki logoya sahip olmayı seviyorum. Şu anda şablonu bir mobil sürüme indirdiğimde, logo tatmin edici olmayan menünün altına giriyor. Menüden önce sahip olmak isterim. Push/pull kullanarak başarıya çalıştım.Zurb Foundation'da Sütunları Yeniden Düzenle

Mobil görünümde, şablonun üstünde logonun bulunması bile mümkün mü?

İşte

benim kodu ...

<div class="container" style="margin-top: 15px;"> 
     <div class="row"> 
      <div class="ten columns mobile-four"> 
       <nav> 
        <ul> 
             <li><a href="#">link</a></li> 
             <li><a href="#">link</a></li> 
             <li><a href="#">link</a></li> 
             <li><a href="#">link</a></li> 
             <li><a href="#">link</a></li> 
             <li><a href="#">link</a></li> 
        </ul> 
       </nav> 
      </div> 
         <div class="two columns mobile-four"> 
       <a href="index.php"><img src="images/logo.png" alt="logo"/></a> 
      </div> 
       </div> 
    </div> 

cevap

11

Böylece ilk uzakta mobile-four sınıfla yapabilirsiniz, bu (kendi özel sürece size) bir şey yapmaz. Belgelere bakıldığında bir mobile-[one two three] var, dördü ayrılmaya eşit olacaktı.

<div class="container" style="margin-top: 15px;"> 
     <div class="row"> 
      <div class="two columns push-ten"> 
       <a href="index.php"> 
        <img src="images/logo.png" alt="logo" /></a> 
      </div> 
      <div class="ten columns pull-two"> 
       <nav> 
        <ul> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </div> 

itin ve ilk Menüsü ve Logo ikinci sipariş doğru olacaktır çekin:

basitçe şöyle bir kaynaktan sipariş sınıfı uygulamak, sorunu çözmek için. Cep telefonunda itme ve çekme yoksayılır, bu da logonuzun mobil cihazlarda menünün üzerine yığılacağı anlamına gelir.

Masaüstü: [Menü] [Logo]

Mobil [Logo] [Menü]

Dokümanlar: http://foundation.zurb.com/docs/grid.php

+1

Teşekkür Ed! Bu harika çalıştı! Gelecekte daha fazla proje inşa etmek için sabırsızlanıyorum, zahmetliyi çok seviyorum! – Ando

+0

Çok hoş geldiniz. –

İlgili konular