在手机模式下隐藏按钮文本 - 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

Answer 2

在bootstrap 3中，hidden-phone类更改为hidden-xs。实际上，hidden-现在可以与其他设备大小前缀一起使用，例如lg，sm等等。