Bootstrap 右拉类答案

【问题标题】：Bootstrap's pull-right classBootstrap 右拉类
【发布时间】：2015-07-01 14:54:53
【问题描述】：

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

当我使用引导程序的pull-right 类时，它会将我的th 中的图标与右上角对齐，而删除pull-right 会将图标垂直居中对齐到左侧，但是有没有办法让当我用pull-right它在中心垂直向右对齐？

我正在使用 bootstrap 和 fontawesome

中的图标

【问题讨论】：

显示与TH垂直对齐的其余代码
如果没有pull-right，你为什么要绝对使用你想要的渲染？
我正在使用引导程序，我的意思是 th 内的元素，如果这被误解了，当我不使用 pull-right 时， 会自动垂直居中对齐班级。但是使用 pull-right 会把它放在右上角
我想用pull-right所以图标在th的右边
看看：stackoverflow.com/questions/7273338/…

【解决方案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

【讨论】：

【解决方案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;
}

【讨论】：