XS屏幕尺寸下头部登录/购物车链接无法点击问题求助

问题描述 #

网站头部的登录、购物车、心愿单等图标链接，在非XS（手机）尺寸屏幕上可正常点击触发，但缩小到XS尺寸后，无法被点击或触摸触发。相关前端代码如下：

<section class="header-main">
    <div class="container">
        <div class="row gy-3 align-items-center">
            <div class="col-lg-2 col-sm-4 col-4">
                <a href="Default.aspx" class="navbar-brand">
                    <img id="imgLogo" class="logo" src="https://xxxx/Logo_200.png" style="height:40px;" />
                </a>
                <!-- brand end.// -->
            </div>
            <div class="order-lg-last col-lg-6 col-sm-10 col-8">
                <div class="float-end">

                    <a href="Login.aspx" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Login/Logout/Register for an Account">
                        <i class="fa fa-user"></i>
                        <span class="ms-1 d-none d-sm-inline-block">
                            <span id="lblSignIn">Sign In/Register</span>
                        </span>
                    </a>
                    &nbsp;
                    
                    <a href="Wishlist.aspx" id="showWishList" class="btn btn-light position-relative">
                        <i class="fa fa-heart">
                            
                        </i><span class="ms-1 d-none d-sm-inline-block">My Wish List</span>
                    </a>
                    &nbsp;

                    <a href="Cart.aspx" class="btn btn-light position-relative">
                        <i class="fa fa-shopping-cart">
                            <span id="MyCartBadge">
                                <b class="notify">
                                    <span id="lblNavCart">0</span>
                                </b>
                            </span>
                        </i>
                        <span class="ms-1 d-none d-sm-inline-block">My Cart 
                        </span>
                    </a>

                </div>
            </div>
            <!-- col end.// -->
            <div class="col-lg-4 col-md-12 col-12">
                <div class="input-group">
                    
                    <input name="ctl00$txtSearch" type="text" id="txtSearch" class="form-control" placeholder="Search" style="width:35%;" />
                    
                    <button onclick="__doPostBack('ctl00$btnSearch','')" id="btnSearch" type="submit" class="btn btn-primary vzindex"><i class="fa fa-search"></i></button>
                </div>
                <!-- input-group end.// -->
            </div>
            <!-- col end.// -->

        </div>
        <!-- row end.// -->
    </div>
    <!-- container end.// -->
</section>
<!-- header-main end.// -->

问题原因分析 #

从代码布局来看，核心原因是XS尺寸下元素重叠导致点击区域被遮挡：

• 链接所在列使用col-8，搜索栏所在列使用col-12，在XS尺寸下，搜索栏会占满整行，加上父级row的align-items-center属性，导致搜索栏容器覆盖在链接区域上方，拦截了点击事件。
• 若自定义CSS（如.vzindex类）给搜索按钮设置了较高z-index，会进一步加剧遮挡问题。

修复方案 #

方案1：提升链接容器层级 #

通过CSS在XS尺寸下给链接容器设置更高层级，确保点击区域不被遮挡：

@media (max-width: 575.98px) {
  .header-main .col-lg-6.col-sm-10.col-8 {
    position: relative;
    z-index: 10; /* 优先级高于下方搜索栏容器 */
  }
}

方案2：调整布局避免重叠 #

修改链接列的栅格类，让其在XS尺寸下占满整行，从根源上避免布局重叠：

<!-- 将原col-8改为col-12，同时调整order确保XS下显示在搜索栏上方 -->
<div class="order-first order-lg-last col-lg-6 col-sm-10 col-12">
    <div class="float-end">
        <!-- 原有链接内容保持不变 -->
    </div>
</div>

方案3：强制启用链接点击事件 #

若pointer-events属性被意外禁用，可强制开启点击权限：

@media (max-width: 575.98px) {
  .header-main .btn-light {
    pointer-events: auto !important;
  }
}

验证方法 #

修改后打开浏览器开发者工具（F12），切换到XS尺寸视图，通过元素选择器查看链接元素的点击区域，确认无其他元素覆盖，再测试点击功能是否恢复正常。

内容的提问来源于stack exchange，提问作者mnicks