bootstrap 4在表格單元格中定位圖標左右側

Question

我試圖在bootstrap v4中的表格單元格中（右側和左側）放置圖標。
要做到這一點，我用這種方式絕對定位：

HTML

<div class="container"> 
    <div class="table-responsive"> 
     <table id="one" class="table table-bordered table-sm"> 
      <thead> 
       <tr> 
        <th class="text-xs-right"> 
         Left Icon Position<span class="left-icon-pos"><i class="fa fa-sort" aria-hidden="true"></i></span> 
        </th> 
        <th> 
         Right Icon Position<span class="right-icon-pos"><i class="fa fa-sort" aria-hidden="true"></i></span> 
        </th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
</div> 

CSS

th { 
    white-space: nowrap; 
    position: relative; 
} 
.right-icon-pos { 
    position: absolute; 
    right: 5px; 
} 
.left-icon-pos { 
    position: absolute; 
    left: 5px; 
} 

該解決方案的效果很好，但我有一個問題，當我調整窗口的大小時，被絕對定位的圖標不佔用空間並顯示在文本上方。 如何獲得相同的效果，以便在調整窗口大小時將圖標並排顯示在文本中？
歡迎所有解決方案（即使不使用絕對定位）。
感謝

My bootply example

Answer 1

引導已助手類「拉左」和「右拉」。如果你將這些添加到你的「左圖標位置」和「右圖標位置」類，並擺脫「位置：絕對」你應該全部設置！

因此，第一個是這樣的： 跨度類=「左邊圖標-POS拉左」