Kosong tempat untuk glyphicon bootstrap

Saya memiliki sebuah meja dengan menyortir bootstrap glyphicons di header. Ikon ini hanya ditampilkan jika tabel yang akan diurutkan tertentu header. Ketika saya klik sel, perubahan ukuran meja. Tabel dinamis, sehingga saya'd sukai tidak memperbaiki ukuran sel. Apakah ada cara saya dapat menempatkan sebuah tempat di sana yang mengambil tempat glyphicon?

Aku tahu bagaimana javascript akan bekerja untuk menyembunyikannya, aku hanya don't tahu bagaimana untuk melakukan css untuk memberikan rentang beberapa ukuran.

(ini adalah bootstrap 3.0 btw)...

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

adalah ikon tertentu. Chrome mengatakan bahwa itu's 16px lebar ketika ditampilkan.

Proyek yang sebenarnya sedikit lebih rumit, di sini's plunkr:

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

Snowburnt
Pertanyaan edit 25 Oktober 2013 в 8:12
Pemrograman
html css twitter-bootstrap
25 Oktober 2013 в 7:50
22 tayangan
Mengomentari pertanyaan (7)
Larutan

Saya don't pikir ada's sebuah karakter spasi di glyphicon font.

Mengapa don't anda hanya menggunakan transparan warna font?

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

The \2122 adalah tanda minus. Gunakan seperti normal icon:

Komentar (6)

Hanya menyembunyikan ikon's elemen dengan visibility: hidden;. E. g.

<span class="glyphicon glyphicon-arrow-down" style="visibility: hidden"><span>
Komentar (0)

Punya masalah yang sama, tetapi juga menggunakan angularJs. I've dilakukan sebagai berikut untuk mengatasi masalah tersebut.

tambahkan class baru dengan css

.glyphicon-hide {
    color: transparent;
}

Kemudian di template saya dapat menggunakan

Komentar (0)

Apa yang membantu saya adalah pengaturan gaya tabel untuk style="table-layout: tetap". Setelah ini, kolom yang lebar dari meja saya tetap sama, apakah ikon yang ditampilkan di samping kolom header atau tidak.

Berikut ini's kode dari tabel:

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

Urutan () fungsi set orderType dan membalik orderReverse. Dengan bantuan ng-show, sebuah panah ditampilkan pada header hanya jika tabel ini diurutkan berdasarkan kolom tersebut. Tidak perlu untuk terlihat glyphicon atau sesuatu seperti itu.

Jim Holden
Jawaban edit 30 Maret 2016 в 2:40
Komentar (0)