Bootstrap的右拉class

Question

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

当我使用 bootstrap 的 pull-right class 时，它会将我 th 中的图标对齐到右上角，并删除 pull-right 将图标垂直居中对齐到左侧，但是有没有办法让我使用 pull-right 时它在中心垂直居中对齐到右侧？

我正在使用 bootstrap 和来自 fontawesome

的图标

Answer 1

您可以将图标置于右侧并与文本垂直对齐，如下所示：

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;
}

Answer 2

您可以在 span 上使用 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

Bootstrap's pull-right class