電話モードでボタンテキストを非表示にする - ブートストラップ

Question

"電話モード"で貴重なスペースを節約するために、ボタンテキストを非表示にしたいアプリケーションを作成しています。すべてのボタンにはアイコンがありますので、十分なはずです。

私は純粋なCSSソリューションを持っていたいと思いますが、私は何も思い付きません。

これは、ボタンは次のようになります。すべて、だから、basicly

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

、の応答モードが携帯電話の場合：

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

私はそれも可能性があることを追加したいと思います.btnセレクタ内のテキストは非表示にする必要があります。しかしアイコンは残る必要があります。

私はtext-identを試しましたが、これもアイコンを非表示にしています。

Answer 1

私はビルトインのツイッターブートストラップクラス.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

これは必要なものですか？

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

は、そのが動作しない場合は、bootstrap-responsive.cssが含まれていることを確認してください。

Answer 3

hidden-phoneクラス3 hidden-xsからchangedました。実際のところ、hidden-は今、このようなlg、smなどなど、他のデバイスのサイズ接頭辞を使用することができます...