css - 将排序箭头图标添加到表格 Bootstrap 4

Question

我正在尝试将这些很棒的字体排序图标添加到表格中，但它没有正确对齐。我也试过 ml-auto 但它没有正确对齐。

我想要的是，将箭头与单元格的右侧对齐。

如果您能提供任何帮助，我们将不胜感激。

实时代码:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="table-responsive shadow p-3 mb-5 bg-light rounded">
  <table id="grid" class="table table-hover sortable">
    <thead class="thead-dark">
      <tr>
        <th data-type="string">?</th>
        <th data-type="string"><i class="fas fa-sort text-right"></i>Socre:</th>
        <th data-type="number"><i class="fas fa-sort text-right"></i>Age:</th>
        <th data-type="number"><i class="fas fa-sort text-right"></i>Student:</th>
        <th class="wfixed" data-type="string">Status:</th>
      </tr>

    </thead>
  </table>
</div>

Answer 1

你能在标记中移动它们吗？如果是这样，只需将它们移动到文本的另一侧。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="table-responsive shadow p-3 mb-5 bg-light rounded">
  <table id="grid" class="table table-hover sortable">
    <thead class="thead-dark">
      <tr>
        <th data-type="string">?</th>
        <th data-type="string"></i>Score:<i class="fas fa-sort text-right"></th>
        <th data-type="number"></i>Age<i class="fas fa-sort text-right">:</th>
        <th data-type="number"></i>Student:<i class="fas fa-sort text-right"></th>
        <th class="wfixed" data-type="string">Status:</th>
      </tr>

    </thead>
  </table>
</div>