Question

我在表头中有一个表格，其中包含排序bootstrap glyphicons。仅当表按特定标题排序时，才会显示图标。当我单击单元格时，它会更改表格的大小。该表是动态的，所以我不想修复单元格大小。有没有办法让占位符放在那里代替glyphicon？

我知道javascript将如何隐藏它，我只是不知道如何使用css来扩展某个大小。

（这是bootstrap 3.0顺便说一句）......

<span class="glyphicon glyphicon-arrow-down"><span>

是特定图标。 Chrome表示显示时它的宽度为16px。

实际项目有点复杂，这里有一个傻瓜：

http://plnkr.co/edit/N6nkW3e4gDdpQdtRC8ue?p=preview

Answer 1

我认为glyphicon font中没有空格字符。

为什么不使用透明的字体颜色？

.glyphicon-none:before {
    content: "\2122";
    color: transparent !important;
}

\ 2122是减号。像普通图标一样使用它：

<i class="glyphicon glyphicon-none"></i>

Answer 2

只需使用visibility: hidden;隐藏图标元素即可。 E.g。

<span class="glyphicon glyphicon-arrow-down" style="visibility: hidden"><span>

Answer 3

有同样的问题，但也使用angularJs。我已完成以下操作来解决此问题。

将新类添加到css

.glyphicon-hide {
    color: transparent;
}

然后在模板中我可以使用

<i class="glyphicon glyphicon-arrow-down" ng-class="{'glyphicon-hide': conditionValue}></i>

Answer 4

帮助我的是将表格的样式设置为style="table-layout: fixed"。在此之后，我的表的列宽保持不变，无论是否在列标题旁边显示图标。

这是表格的代码：

<table class="table table-hover" style="table-layout: fixed;">
<thead>
  <tr>
    <th ng-click="order('col1')">
      Column Header 1
      <span class="glyphicon" ng-show="orderType == 'col1'"
        ng-class="orderReverse ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span>
    </th>
    <th ng-click="order('col2')">
      Column Header 2
      <span class="glyphicon" ng-show="orderType == 'col2'"
        ng-class="orderReverse ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span>
    </th>
  </tr>
</thead>
<tbody>
  ...
</tbody>
</table>

order()函数设置orderType并翻转orderReverse。在ng-show的帮助下，仅当表按该列排序时，标题上才会显示箭头。不需要隐形的glyphicon或类似的东西。

Bootstrap glyphicon的空白占位符

4 个答案: