html - 在电话模式下隐藏按钮文本 - Bootstrap

Question

我正在制作一个应用程序，我想在其中隐藏按钮文本，以便在“电话模式”下节省宝贵的空间。所有按钮都有图标，所以这应该足够了。

我想有一个纯 css 解决方案，但我想不出任何东西。

这是按钮的样子:

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

我想补充一点，它也可以是:

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

所以基本上，如果响应的模式是电话，.btn 选择器中的所有文本都应该被隐藏。但该图标需要保留。

我试过 text-ident，但它也隐藏了图标。

Answer 1

我会使用内置的 twitter Bootstrap 类 .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