9

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

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

4

5 回答 5

10

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

于 2013-04-04T20:12:54.823 回答
5

在引导程序 3 中，hidden-phone该类更改为hidden-xs. 事实上，hidden-现在可以与其他设备大小前缀一起使用，例如lg,sm等等...

于 2015-09-06T16:04:52.417 回答
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如果它不起作用，请确保您已包含在内。

于 2013-04-04T20:11:57.853 回答
1

对于 Bootstrap 4，您可以使用display property。因此，这些类使用以下格式命名：

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, and xl.

所以你的代码应该是这样的：

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
    <i class="icon-save"></i> <span class="d-none d-sm-inline">Save</span>
</button>

对于超小（xs）屏幕，文本将消失：

在此处输入图像描述

于 2020-09-04T14:37:50.730 回答
0

您可以像这样编写一个简单的 CSS 规则：

@media screen and (max-width: 576px) and (min-width: 0px) {
  .desktop-only {
    display: none;
}

进而

   <button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
           <i class="icon-save"></i> <span class="desktop-only">Save</span>
    </button>
于 2020-05-01T06:51:06.353 回答