Переставить столбцы в Zurb Foundation

моя проблема в том, что на рабочем столе мне нравится сначала меню, а затем логотип в дальнем правом углу. В настоящее время, когда я сжимаю шаблон до мобильной версии, логотип попадает в меню, что неудовлетворительно. Я хотел бы иметь его перед меню. Я пытался использовать push/pull без успеха.

Возможно ли вообще иметь логотип поверх шаблона в мобильном представлении?

Вот мой код...

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

zurb-foundation
person Ando    schedule 25.08.2012    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Итак, сначала вы можете покончить с классом mobile-four, он ничего не делает (если только он не настроен для вас). Глядя на документацию, есть mobile-[one two three], четыре было бы эквивалентно его отключению.

Чтобы решить эту проблему, просто примените класс упорядочения исходного кода, например:

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

Нажатие и вытягивание правильно упорядочат меню сначала, а логотип - во вторую. Push и pull игнорируются на мобильных устройствах, то есть ваш логотип будет располагаться над меню на мобильных устройствах.

Рабочий стол: [Меню][Логотип]

Мобильный [Логотип] [Меню]

Документы: http://foundation.zurb.com/docs/grid.php

person Ed Charbeneau    schedule 28.08.2012
comment
Спасибо Эд! Это сработало отлично! Вы были очень полезны. Мне нравится зурб, и я с нетерпением жду возможности построить с ним больше проектов в будущем! - person Ando; 30.08.2012