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有助手类＆＃34;左拉＆＃34;并且＆＃34;拉右＆＃34;。如果你将它们添加到你的＆＃34;左图标位置＆＃34;和＆＃34;右图标位置＆＃34;上课并摆脱＆＃34;职位：绝对＆＃34;你应该全力以赴！

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

bootstrap 4在表格单元格中左右两侧定位图标

1 个答案: