在手机模式下隐藏按钮文本 - 引导

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

我想有一个纯粹的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，但那也隐藏了图标。

来源

2013-04-04 JohnHeroHD

我会使用内置的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

来源

2013-04-04 20:12:54

这是W3C有效< /a>呢？如果是这样的话，那将是完美的。 – JohnHeroHD 2013-04-04 20:57:00

是的，你可以把span标签放在'a'标签里 – 2013-04-04 21:00:35

Alrighty，谢谢！ – JohnHeroHD 2013-04-05 17:13:46

这是你想要的吗？

<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，如果它不起作用。

来源

2013-04-04 20:11:57 jonc

在自举3 hidden-phone类是changed到hidden-xs。事实上，目前hidden-现在可以与其它设备大小前缀如lg使用，sm等等

来源

2015-09-06 16:04:52

在手机模式下隐藏按钮文本 - 引导

回答

相关问题