web-dev-qa-db-ja.com

bootstrap glyphiconの空白のプレースホルダー

ヘッダーにグリフコンを並べ替えるbootstrap。 。テーブルは動的であるため、セルサイズを固定しない方がよいのですが、グリフィコンの代わりにプレースホルダーを配置する方法はありますか？

私はJavaScriptがそれを隠すためにどのように機能するかを知っていますが、スパンにある程度のサイズを与えるためにcssを行う方法がわかりません。

（これはbootstrap 3.0 btw）...

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

特定のアイコンです。 Chromeは、表示時に幅が16ピクセルであることを示します。

実際のプロジェクトはもう少し複雑です、ここにプランカーがあります：

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

htmlcsstwitter-bootstrap
45
Snowburnt

glyphicon font に空白文字があるとは思わない。

なぜ透明なフォント色を使用しないのですか？

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

\ 2122はマイナス記号です。通常のアイコンのように使用します。

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

visibility: hidden;でアイコンの要素を非表示にするだけです。例えば。

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

同じ問題を抱えていましたが、angularJsも使用していました。この問題を解決するために次のことを行いました。

cssに新しいクラスを追加します

.glyphicon-hide {
    color: transparent;
}

次に、テンプレートで使用できます

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

私が助けたのは、テーブルのスタイルを_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_を使用すると、テーブルがその列でソートされている場合にのみ、ヘッダーに矢印が表示されます。目に見えないグリフィコンなどは必要ありません。

0
Jim Holden