jQuery Мобильные кнопки не выстраиваются сеткой

Question

Я хочу сделать меню навигации с помощью 4 кнопок, используя сетку. По умолчанию мои кнопки должны заполнять все пространство сетки. Это почему-то не так. Может ли кто-нибудь указать, что происходит не так? Ниже вы можете найти мой код.

<div data-role="page"> 
    <div data-role="header" data-position="inline"> 
    <h1>Title</h1> 
    <fieldset class="ui-grid-c"> 
     <div class="ui-block-a"> 
     <a href="#" data-role="button" data-icon="home" data-iconpos="top">Home</a> 
     </div> 
     <div class="ui-block-b"> 
     <a href="#" data-role="button" data-icon="grid" data-iconpos="top">MenuItem2</a> 
     </div> 
     <div class="ui-block-c"> 
     <a href="#" data-role="button" data-icon="settings" data-iconpos="top">MenuItem3</a> 
     </div> 
     <div class="ui-block-d"> 
     <a href="#" data-role="button" data-icon="info" data-iconpos="top">Info</a> 
     </div> 
    </fieldset><!-- /ui-grid-a --> 
    </div><!-- /header --> 
</div><!-- /page --> 

Большое спасибо!

Тайс

Answer 1

Почему бы вам не использовать navbar, который используется для этого типа задач? См. Пример: http://jsfiddle.net/JyQqN/