jQuery Mobile中的Navbar

Question

我在页脚的这个导航栏

<footer data-role="footer">
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li><a href="a.html" class="ui-btn-active" data-icon="star">Fav</a></li>
            <li><a href="b.html" data-icon="back">Recent</a></li>
            <li><a href="a.html" data-icon="delete">Contacts</a></li>
            <li><a href="b.html" data-icon="grid">Keypad</a></li>
            <li><a href="a.html" data-icon="delete">Voicemail</a></li>
        </ul>
    </div><!-- /navbar -->
</footer>

http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html说，导航栏最多可以在一行中占用5个项目，但是在这里，导航项目分配了3列布局，最后2个li项目在第二行中落下。

我错过了什么吗？

Answer 1

尝试节拍4.1而不是前沿变化。

而不是使用：http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html 尝试：http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html

使用4.1 beta进行现场演示。您的代码运行正常：http://jsfiddle.net/BCnBN/

Answer 2

请试试这个..

<footer data-role="footer">
    <div data-role="navbar" data-iconpos="top" data-grid="d">
        <ul>
            <li><a href="a.html" class="ui-btn-active" data-icon="star">Fav</a></li>
            <li><a href="b.html" data-icon="back">Recent</a></li>
            <li><a href="a.html" data-icon="delete">Contacts</a></li>
            <li><a href="b.html" data-icon="grid">Keypad</a></li>
            <li><a href="a.html" data-icon="delete">Voicemail</a></li>
        </ul>
    </div><!-- /navbar -->
</footer>