如何修复Google地图弹窗轮播右chevron箭头全分辨率定位问题

右箭头定位错位、需要逐断点硬调偏移的核心原因是定位基准不统一：

• 左chevron默认继承父元素.carousel-control的流式布局，以轮播容器为定位参考
• 你给右chevron单独设置了position: fixed，定位参考是整个浏览器视口，地图弹窗位置、尺寸随分辨率变化时，右箭头自然会和左箭头位置不匹配，硬编码媒体查询本质是凑数值，没有解决根本问题。

完全删除所有针对.glyphicon-chevron-right的fixed定位规则、以及三个响应式断点下硬编码top/right的媒体查询代码，统一左右箭头的定位逻辑，用弹性布局实现自动居中，全分辨率下自动保持对称，零额外适配成本。

可直接替换的CSS代码 #

/* 箭头颜色保持自定义配置 */
.glyphicon {
  color: var(--rct-red);
}

/* 清除右箭头错误的固定定位 */
.glyphicon-chevron-right {
  position: static !important;
}

/* 统一左右控制栏的定位和居中规则 */
.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  /* 用flex实现子元素（箭头）垂直+水平居中 */
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
  background-color: rgba(0,0,0,0);
  opacity: .5;
}

/* 保留右控制栏原有渐变效果 */
.carousel-control.right {
  right: 0;
  left: auto;
  background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
  background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
  background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
  background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  background-repeat: repeat-x;
}

/* 保留全局盒模型规则 */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

• 原有代码里给panel + h4, div, a全局设置居中、大字号的写法会污染Google地图本身的控件样式，也可能干扰轮播布局计算，建议给这类样式增加轮播容器作用域，比如改成.carousel div, .carousel a { text-align: center; font-size: large; }
• 修复后左右chevron都会以各自所在的.carousel-control栏为基准自动居中，不管地图弹窗尺寸、位置怎么随分辨率变化，两个箭头的位置永远对称，不需要再写任何响应式断点手动调整偏移值。

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