mui九宫格问题

<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<span class="mui-icon iconfont icon-ln-"></span>
<div class="mui-media-body">日监控</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<span class="mui-icon iconfont icon-rizhijiankong"></span>
<div class="mui-media-body">月监控</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<span class="mui-icon iconfont icon-yujing"></span>
<div class="mui-media-body">计划预警</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<span class="mui-icon iconfont icon-yujingtongji"></span>
<div class="mui-media-body">气款预警</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<span class="mui-icon iconfont icon-baobiao1"></span>
<div class="mui-media-body">报表</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<span class="mui-icon iconfont icon-baobiaochaxun"></span>
<div class="mui-media-body">报表查询</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<span class="mui-icon iconfont icon-baobiao"></span>
<div class="mui-media-body">气量报表审核</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<span class="mui-icon iconfont icon-icojieqingqiankuan"></span>
<div class="mui-media-body">清欠报表审核</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<span class="mui-icon iconfont icon-gengduo"></span>
<div class="mui-media-body">更多选项</div>
</a>
</li>
</ul>
</div>
这是我九宫格的代码，在我的手机(nokia6)上测试的时候，九宫格最后一排下面的文字被挡住了，并且手机不能上下滑动。这是怎么回事？？前面2排的九宫格都能正常显示图标和下面的文字，下面最后一排就不能正常显示了。求解！