css - 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"