jQuery移动按钮未排列在网格中

我想使用网格布局制作一个带有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 -->

标题

非常感谢

---

Thijs

为什么不使用用于该类型任务的

navbar

？ 见示例：