javascript - 网格元素单击事件在移动设备等小屏幕上不起作用

Question

我在 div 中显示了一个网格元素，它可以切换显示和隐藏元素， 在台式机和平板电脑上它运行良好，但在移动设备上元素按钮单击事件不起作用。 在桌面上，当我将鼠标悬停在网格元素上时，它会将其颜色更改为蓝色，并将光标更改为指针。

该网格的示例代码如下

<div class="items_grid" style="width: 50%; float: right; height: 320px; overflow-x: hidden; overflow-y: auto; position: absolute; z-index: 10; top: 0px; right: 0px; border: 1px solid rgb(219, 219, 219); display: block;">
            <div class="col-md-12 col-sm-12 col-xs-12 div_padding">
                    <div class="form-group col-md-12 col-sm-12 col-xs-12" style="background-color:#DADADA;color:#000000;border:1px solid #DADADA;">
                    <center><form class="form-inline" style="padding:0px;margin-bottom:1px;">
                        <select class="form-control" name="menucategory" onchange="getbycategory(this.value)">
                        <option value="0">--Select Category/All--</option>
                        <option value="1">ABC</option>
                        </select>
                    </form></center>
                    </div>
                </div>
                <div id="menu_items">
                <div class="col-md-2 col-sm-3 col-xs-6 itm">
                <button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('1527')">Comma Hoox Powerbank 6000</button>
                </div>
                <div class="col-md-2 col-sm-3 col-xs-6 itm">
                <button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('4002')">Epay</button>
                </div>
                <div class="col-md-2 col-sm-3 col-xs-6 itm">
                <button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('2')">Fees - 1st Installment</button>
                </div>


                <div class="row" style="background-color:#f5f5f5;">
                <div class="col-md-12 col-sm-12" style="padding-top:2px;">
                        <div class="col-md-6 col-sm-6" id="p_page"><button class="btn btn-primary btn-block pagenation disable" onclick="pagination(,0)"> &lt;&lt; </button></div>
                        <div class="col-md-6 col-sm-6" id="n_page"><button class="btn btn-primary btn-block pagenation" onclick="pagination(12,0)"> &gt;&gt; </button>
</div>
                    </div>
                </div>  
            </div>

示例代码

    function insertitem(invcode)
        {   
            if(invcode=='')
           {
               alert("no item");
            }
    else
    {
      //some function
    }
}

Answer 1

注意:切勿将 col 嵌套在 col 中，cols 应始终位于行内。

顺便说一下

<div class="clearfix"></div>

在最后一项之后应清除 float 并解决此问题。