Bootstrap 5中position-relative搭配row类无法正常生效如何解决

问题原因 #

你的页面设置了全局dir="rtl"右到左布局，同时使用了Bootstrap栅格的row类，该类默认带有左右负外边距，用来抵消子元素col的内边距。你给row添加了position-relative作为定位父级，负外边距会导致row的实际左右边界超出父容器范围，你使用的end-0定位类在RTL布局下对应逻辑末尾也就是视觉左侧，刚好对齐row超出父容器的左边界，所以图标会显示在可视区域外看不到。移除row类后负边距消失，定位自然就恢复正常。

解决方案 #

以下两种方案都可以保留row类，不影响原有栅格布局：

1. 取消row的水平栅格间距
   给row类追加gx-0参数，取消水平方向的栅格边距，就不会出现负边距导致的定位偏移问题，修改后的对应代码如下：

<div id="showFilters">
  <!-- 追加gx-0取消水平栅格间距 -->
  <div class="position-relative row gx-0">
    <i class="fas fa-times text-danger position-absolute end-0"></i>
    <div class="col-md-4 mb-3">
      <label for="name" class="form-label">نام فیلتر</label>
      <input type="text" id="name" class="form-control" name="filters[1][name]">
    </div>
    <div class="col-md-4 mb-3">
      <label for="latin" class="form-label">نام لاتین فیلتر</label>
      <input type="text" id="latin" class="form-control" name="filters[1][latin]">
    </div>
    <div class="col-md-4 mb-3">
      <label for="field" class="form-label">انتخاب فیلد</label>
      <select id="field" class="form-select" name="filters[1][field]">
        <option value="1">چک باکس</option>
        <option value="2">رنگ</option>
        <option value="3">آپشن</option>
      </select>
    </div>
  </div>
</div>

2. 给图标添加偏移量
   如果你不想取消栅格间距，可以直接给图标追加me-3类（RTL布局下me对应左侧外边距），让图标往右侧偏移一点，避开row超出父容器的范围即可：

<i class="fas fa-times text-danger position-absolute end-0 me-3"></i>

额外优化建议 #

你的代码里重复引入了两次Font Awesome样式，CDN版本和本地版本保留一个即可，避免出现样式冲突。

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