Пустой местозаполнитель для Bootstrap glyphicon

У меня есть таблица с сортировкой ушко технологии glyphicons в заголовке. Значок отображается, только если в таблице отсортированы в этот конкретный заголовок. Когда я щелкните ячейку, это изменения размеров таблицы. Таблица является динамической, поэтому я'предпочту не фиксируя размеры ячеек. Есть ли способ я могу поставить место там занимает место glyphicon?

Я знаю, как код JavaScript будет работать, чтобы скрыть это, я просто не'т знаю, как это сделать в CSS, чтобы дать срок какой-то размер.

(это в Bootstrap 3.0 кстати)...

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

это особый значок. Хром говорит, что это'с широким 16px и, когда отображается.

Реальный проект является немного сложнее, здесь'ы plunkr:

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

Snowburnt
Редактировал вопрос 25-го октября 2013 в 8:12
Программирование
html css twitter-bootstrap
25-го октября 2013 в 7:50
27 просмотров
Комментарии к вопросу (7)
Решение

Я Дон'т думаю, что там'ы пробельный символ в шрифт glyphicon.

Почему Дон'т вы просто использовать прозрачный цвет шрифта?

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

В \2122-это минус. Использовать его как обычный значок:

Комментарии (6)

Просто скрыть значок'ы элемент с видимость: скрытый;`. Е. Г.

<span class="glyphicon glyphicon-arrow-down" style="visibility: hidden"><span>
Комментарии (0)

Была такая же проблема, но также с помощью AngularJS. Я'вэ сделать следующее, чтобы решить проблему.

добавить новый класс в CSS

.glyphicon-hide {
    color: transparent;
}

Затем в шаблон я могу использовать

Комментарии (0)

Что помогло мне было задание стиля таблицы стиль="в таблицу-макет: фиксированная"` в. После этого, ширину столбцов в моей таблице осталась прежней, был ли значок отображается рядом с заголовком столбца или нет.

Здесь'ы код таблицы:

<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>

Функцию заказа () устанавливает orderReverse в orderType переворачивает`. С помощьюНГ-шоу, стрелка отображается в заголовке только если таблица отсортирована по этому столбцу. Нет необходимости в невидимую glyphicon или что-нибудь подобное.

Jim Holden
Редактировал ответ 30-го марта 2016 в 2:40
Комментарии (0)