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-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 に答える