Bootstrap 5联系表单响应式问题：移动端箭头显示异常

1. 修正箭头定位，实现完美居中 #

当前移动端和平板端箭头显示偏移，核心原因是定位仅设置了left:50%但未做水平偏移校正，同时旋转角度和顶部距离设置不合理。修改CSS中的媒体查询代码：

/* 平板端（768px-991px） */
@media (min-width:768px) and (max-width:991px){
    .right i {
        top: -40px; /* 箭头尺寸80px，设为负一半使箭头底部贴合区域边界 */
        left: 50%;
        transform: translateX(-50%) rotate(-90deg); /* 水平居中+旋转为向上箭头 */
    }
}

/* 移动端（≤767px） */
@media (max-width:767px){
    .left {
        padding: 90px 15px;
        text-align: center;
    }
    .left h2 {
        font-size: 25px;
    }
    .right {
        padding: 25px;
    }
    .right i {
        top: -40px;
        left: 50%;
        transform: translateX(-50%) rotate(-90deg); /* 水平居中+旋转为向上箭头 */
    }
    .right button {
        width: 150px;
        padding: 12px 0;
    }
}

2. 优化箭头样式（可选） #

如果旋转后的箭头视觉效果不理想，可以直接替换图标：
将HTML中的<i class="fa fa-caret-left"></i>改为<i class="fa fa-caret-up"></i>，同时删除媒体查询中的rotate(-90deg)，仅保留居中定位：

.right i {
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}

3. 清理重复资源引用 #

你的HTML代码里重复引入了多套Bootstrap和Font Awesome的样式、脚本文件，这会引发样式冲突并增加页面加载负担，建议只保留一套最新版本的资源引用，删除其余重复的<link>和<script>标签。

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