Jquery Mobile NavBar reflow

Question

嗨，我有这个导航栏：

<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

你可以在Twitter的引导中查看他们是如何做到的。基本上，您将对特定屏幕尺寸进行媒体查询，并以这种方式设置页面格式。

事实上，你为什么不直接集成Twitter的Bootstrap，你会得到你可能遇到的所有其他东西：http://getbootstrap.com/

看看吧，它有你想要/需要的一切。