Question

<th>Cars <i class="fa fa-sort-asc pull-right"></i></th>

当我使用bootstrap的pull-right课程时，它会将我的th中的图标与右上角对齐，然后移除pull-right会将垂直居中的图标对齐到左侧，但是有一种方法，当我使用pull-right时，它在中心垂直向右对齐？

我正在使用 bootstrap 和来自 fontawesome 的图标

Answer 1

您可以在跨度上使用pull-left而不是..

<th class="text-right">
     <span class="pull-left">First Name</span>
     <i class="fa fa-sort-asc"></i>
</th>

在 Bootstrap 4 中，pull-left现在为float-left，而pull-right现在为float-right

Answer 2

您可以在右侧显示图标，并垂直对齐文字，如下所示：

<强> HTML

<th>
  <div class="header-with-icon">
    <div>First Name</div>
    <div class="text-right"><i class="fa fa-sort-asc"></i></div>
  </div>
</th>

<强> CSS

.header-with-icon{
  display: table;
  width: 100%;
}

.header-with-icon > div{
  display: table-cell;
}