底部NAV栏的问题

想做一个这样的效果，就用nav做了一个，但是发现点击图标无法触发按钮，触发的位置偏向上方了，还很小的一个区域，这是为什么，求助朋友们，应该怎么写这个样式？

<nav class="mui-bar mui-bar-tab">  
            <div class="mui-tab-item">  
                <div class="mui-row">  
                    <div class="mui-col-sm-4 mui-col-xs-4">  
                        <button type="button" class="mui-btn mui-btn-link">  

                    <span class="mui-icon mui-icon-arrowleft"></span>  
                </button>  
                    </div>  
                    <div class="mui-col-sm-8 mui-col-xs-8">  
                        <input style="margin: 10px 2px 10px 2px;width: 90%;" class="" type="" name="" id="" value="" />  
                    </div>  
                </div>  
            </div>  

            <div class="mui-tab-item">  
                <div class="mui-row" style="width: 100%; z-index: 999;">  
                    <div class="mui-col-sm-4 mui-col-xs-4">  
                        <button type="button" class="mui-btn mui-btn-link">  

                    <span class="mui-icon mui-icon-chatboxes"><span class="mui-badge mui-badge-danger">45</span></span>  
                </button>  
                    </div>  
                    <div class="mui-col-sm-4 mui-col-xs-4">  
                        <button type="button" class="mui-btn mui-btn-link">  

                    <span class="mui-icon mui-icon-pengyouquan"></span>  
                </button>  
                    </div>  
                    <div class="mui-col-sm-4 mui-col-xs-4" onclick="toTop()">  
                        <button type="button" class="mui-btn mui-btn-link" style="margin-top: 3px;">  

                    <span class="mui-icon-extra mui-icon-extra-top"></span>  
                </button>  
                    </div>  

                </div>  
            </div>  
        </nav>

代码如上：用a标签不存在问题，但是内部用了row就会有这个问题