Jquery Mobile NavBar reflow

Question

Привет, у меня есть этот navbar:

<div data-role="navbar" data-theme="c" >
            <ul>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                         text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                        text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                         text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                        text
                    </a>
                </li>
            </ul>
      </div>


</div>

Мне нужно добавить кнопку "меню", если экран устройства слишком мал для показа трех кнопок.

Примерно так: http://img30.imageshack.us/img30/8634/o6c5.png

Я знаю, что мне нужно добавить правило в CSS, но я не знаю, пожалуйста. Спасибо

Answer 1

Вы можете проверить, как они делают это в начальной загрузке Twitters. По сути, у вас есть медиа-запрос для определенного размера экрана и форматирование страницы таким образом.

На самом деле, почему бы вам просто не интегрировать Bootstrap в Twitter, и вы получите все остальное, с чем можете столкнуться: http://getbootstrap.com/

Проверьте это, в нем есть все, что вы хотите / нужно.