html - 表标题中的 Twitter Bootstrap 排序图标对齐问题

Question

我有一个布局问题，我正在尝试解决它涉及可排序的列。当用户在低分辨率屏幕上或调整浏览器大小时，排序图标不再相互对齐。用户对此已多次抱怨。

在下面的屏幕截图中，我希望排序图标与绿线对齐，而不是它们现在的方式（红线）

这是呈现上表的 jsfiddle 片段：http: //jsfiddle.net/JgSMq/

 <table class="table table-bordered data-table sort display">
   <thead>
     <th class="sorting">ID Column <i class="sort-icon"></i></th>
   <thead>
 </table>

Answer 1

好吧，也许您可​​以尝试以下方法：

th {
    white-space: nowrap;
}

这是你的小提琴更新：http: //jsfiddle.net/JgSMq/1/

Answer 2

要解决此问题，您可以将<i>标签移动到<th>. 这应该会大大改善您的对齐问题。

但是，要完全修复它，您可能需要vertical-align:top;在那些<th>.

这是一个例子。