Ukryj tekst przycisku w trybie telefonu - Bootstrap

Question

Tworzę aplikację, w której chciałbym ukryć tekst przycisku, aby zaoszczędzić cenne miejsce w "trybie telefonu". Wszystkie przyciski mają ikony, więc powinno wystarczyć.

Chciałbym mieć rozwiązanie czystego css, ale nie mogę wymyślić niczego.

To co przycisk wygląda tak:

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary"><i class="icon-save"></i> Save</button> 

Chciałbym dodać, że może to być również:

<a class="btn btn-warning"><i class="icon-trash"></i> Delete</a> 

Więc w zasadzie, jeśli tryb reagujący jest telefon, wszystko tekst wewnątrz selektora .btn powinien być ukryty. Ale ikona musi pozostać.

Próbowałem już text-ident, ale to również ukrywa ikonę.

Answer 1

Chciałbym użyć wbudowanej klasy bootstrap twitter .hidden-phone.

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary"> 
      <i class="icon-save"></i> <span class="hidden-phone">Save</span> 
    </button> 

http://twitter.github.com/bootstrap/scaffolding.html#responsive

Answer 2

Czy tego chcesz?

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary"> 
    <i class="icon-save icon-white"></i> 
    <span class="hidden-phone">Save</span> 
</button> 

Upewnij się, że dołączono bootstrap-responsive.css, jeśli nie działa.

Answer 3

W bootstrap 3 klasa hidden-phone był changed do hidden-xs. Niezależnie od faktu, hidden- może być teraz używany z innymi prefiksami rozmiar urządzenia, takie jak lg, sm etc ...