49

我有一个表，在标题中排序引导字形图标。仅当表格按该特定标题排序时才会显示该图标。当我单击单元格时，它会更改表格的大小。该表是动态的，所以我不想固定单元格大小。有没有办法可以在其中放置一个占位符来代替字形图标？

我知道javascript如何隐藏它，我只是不知道如何做css来给跨度一些大小。

（这是引导程序 3.0 顺便说一句）...

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

是特定的图标。Chrome 说它在显示时是 16px 宽。

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

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

4

4 回答 4

82

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

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

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

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

<i class="glyphicon glyphicon-none"></i>
于 2014-04-07T13:06:10.093 回答
9

只需用 隐藏图标的元素visibility: hidden;。例如

<span class="glyphicon glyphicon-arrow-down" style="visibility: hidden"><span>
于 2016-03-11T22:53:07.880 回答
0

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

向 CSS 添加新类

.glyphicon-hide {
    color: transparent;
}

然后在模板中我可以使用

<i class="glyphicon glyphicon-arrow-down" ng-class="{'glyphicon-hide': conditionValue}></i>
于 2016-03-01T22:07:49.223 回答
0

帮助我的是将表格的样式设置为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，只有当表格按该列排序时，才会在标题上显示一个箭头。不需要隐形的字形图标或类似的东西。

于 2016-03-30T14:28:02.273 回答