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

Bootstrap 有辅助类“pull-left”和“pull-right”。如果你将它们添加到你的“left-icon-position”和“right-icon-position”类中并去掉“position: absolute”，你应该已经准备好了！

所以第一个看起来像这样： span class="left-icon-pos pull-left"