twitter-bootstrap bootstrap glyphicon 的空白占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19598336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blank placeholder for bootstrap glyphicon
提问by Snowburnt
I have a table with sorting bootstrap glyphicons in the header. The icon is only shown if the table is being sorted by that particular header. When I click the cell, it changes the sizing of the table. The table is dynamic, so I'd prefer not fixing the cell sizes. Is there a way I can put a placeholder in there that takes the place of the glyphicon?
我有一个表，在标题中对引导程序字形进行排序。仅当表格按特定标题排序时才会显示该图标。当我单击单元格时，它会更改表格的大小。表格是动态的，所以我不想固定单元格大小。有没有办法在那里放置一个占位符来代替字形？
I know how the javascript will work to hide it, I just don't know how to do the css to give the span some size.
我知道 javascript 将如何隐藏它，我只是不知道如何使用 css 来给 span 一些大小。
(this is bootstrap 3.0 btw)...
（顺便说一下，这是引导程序 3.0）...
<span class="glyphicon glyphicon-arrow-down"><span>
is the particular icon. Chrome says that it's 16px wide when displayed.
是特定的图标。Chrome 表示显示时它的宽度为 16 像素。
The actual project is a little more complicated, here's a plunkr:
实际项目有点复杂，这里有一个plunkr：
回答by Riga
I don't think there's a whitespace character in the glyphicon font.
我认为glyphicon font 中没有空格字符。
Why don't you just use a transparent font color?
为什么不直接使用透明字体颜色？
.glyphicon-none:before {
content: "22";
color: transparent !important;
}
The \2122 is a minus sign. Use it like a normal icon:
\2122 是一个减号。像普通图标一样使用它：
<i class="glyphicon glyphicon-none"></i>
回答by nick
Just hide the icon's element with visibility: hidden;. E.g.
只需用 隐藏图标的元素visibility: hidden;。例如
<span class="glyphicon glyphicon-arrow-down" style="visibility: hidden"><span>
回答by Jim Holden
What helped me was setting the style of the table to style="table-layout: fixed". After this, the column widths of my table stayed the same, whether an icon was shown next to the column header or not.
帮助我的是将表格的样式设置为style="table-layout: fixed". 在此之后，我的表格的列宽保持不变，无论列标题旁边是否显示图标。
Here's the code of the table:
这是表的代码：
<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>
The order()function sets the orderTypeand flips orderReverse. With the help of ng-show, an arrow is shown on the header only if the table is sorted by that column. No need for an invisible glyphicon or anything like that.
该order()函数设置orderType和 翻转orderReverse。在 的帮助下ng-show，仅当表格按该列排序时，标题上才会显示箭头。不需要隐形字形或类似的东西。
回答by Vitaly
Had the same issue, but was also using angularJs. I've done the following to resolve the issue.
有同样的问题，但也在使用 angularJs。我已完成以下操作来解决此问题。
add new class to css
将新类添加到 css
.glyphicon-hide {
color: transparent;
}
Then in template I can use
然后在模板中我可以使用
<i class="glyphicon glyphicon-arrow-down" ng-class="{'glyphicon-hide': conditionValue}></i>
